Working on a CMS/rich text editor, and for now just recreating the layout Wix is using.Looks like this at the moment: Base Layout and with the sidebar expanded like this: Expanded Sidebar
Flexbox ModelUsing flex over absolute on the sidebar, as I want the editor to shrink whenever the sidebar gets expanded.Blue is the container, red and green are the children. Red is position: sticky, so is the toolbar within the green container.
Things work, the sticky toolbar inside the green editor container stays where it is supposed to, but the sidebar in red scrolls down with the editor text:On Scroll
Makes sense, in the flex model, as when green grows, so does red.
Desired OutcomeIdeally, I'd like to have the scrollbar only within the editor view, and any scrolling to only affect it (in yellow).
I tried giving the red sidebar a max-height of (100vh - header), which kind of works, but is easily broken, e.g whenever a horizontal scrollbar appears and disappears.Also tried the old overflow: hidden on body, and overflow: auto on the editor, but couldn't get scrolling to work again unless I remove overflow: hidden from body.
