on my page I have three divs next to each other. One main content and two sidebar type things. They all have dynamic content and no fixed heights.

What I want is that the main child determines the height of the container. And the two sidebar containers adhere to that. So the sidebars should be as high as needed, but not higher than the main-child. (If they have more content to show, then they should get a vertical scroll-bar instead)

What I have in my current solution is that the height of the container is determined by the tallest child. This is not what I want.

This codesandbox shows the issue:
https://codesandbox.io/p/sandbox/sidebar-height-92pgch

How can I achieve that the container height is only determined by the main-child?

Regards