I'm trying to create a 3-column layout where one of the columns scrolls as it overflows.

I have a working prototype [here in this code sandbox](https://codesandbox.io/s/flexbox-scroll-overflow-column-1e1vs?file=/src/Container.jsx).

It looks like this:

[![enter image description here](https://i.stack.imgur.com/yvEB2.png)](https://i.stack.imgur.com/yvEB2.png)

The teal/cyan color is the overflow scrolling section - and the topmost parent's padding is visible around the frame in gray.

**The part that doesn't work** - is that when I want to embed/nest this working flexbox within another flexbox that also contains a header - but when I do that, the contained scrolling of this one breaks - and the whole flexbox overflows off screen.

[Codesandbox of version that doesn't work](https://codesandbox.io/s/flexbox-scroll-overflow-column-with-header-dqx4k?file=/src/Container.jsx)

Screenshot:

[![enter image description here](https://i.stack.imgur.com/sLrG6.png)](https://i.stack.imgur.com/sLrG6.png)

I guess there's something about flexbox sizing that I don't understand cause I have played around with different height/flex values and can't fix this.

What am I doing wrong?

---

P.S. I'm using [Chakra-UI](https://chakra-ui.com) for components+styling - but the attributes are the same as vanilla CSS. I don't think that makes any difference to this problem. The markup is just more concise.