CSS 仅在网站的一部分上滚动 - Flexbox、侧边栏

Question

使用 CMS/富文本编辑器，目前只是重新创建 Wix 正在使用的布局。 目前看起来像这样： 侧边栏展开如下：

在侧边栏上使用flex而不是absolute，因为我希望编辑器在侧边栏扩展时收缩。 蓝色是容器，红色和绿色是孩子。红色是位置：粘性，绿色容器内的工具栏也是如此。

一切正常，绿色编辑器容器内的粘性工具栏保持在应有的位置，但红色侧边栏随编辑器文本向下滚动：

有道理，在柔性模型中，当绿色增长时，红色也会增长。

理想情况下，我希望滚动条仅在编辑器视图中，并且任何滚动都只会影响它（黄色）。

我尝试给红色侧边栏设置最大高度（100vh - header），这种方法可行，但很容易被破坏，例如每当水平滚动条出现和消失时。 还尝试了旧的溢出：隐藏在主体上，以及编辑器上的溢出：自动，但无法滚动以再次工作，除非我删除溢出：隐藏在主体上。

Answer 1

尝试使编辑器具有粘性位置，并将其他元素相对放置到编辑器。

position:sticky