How to achieve 2 divs with aspect ratio and stretch the 2nd div by the remaining height of the parent container

Question

My question is very similar to Make div (height) occupy parent remaining height but I don't achieve the behaviour I want to. (Basically I already have a working solution which uses https://www.npmjs.com/package/resize-observer-polyfill but I wrote it 1 year ago and now I have trouble reading my own code, so I want to achieve the same with pure CSS now.

I was able to get rid of the ResizeObserver and rewrite it by using a fixed height for my first div:

        return <div style={{height: "100%", maxHeight: "100%"}}>
            <Card style={{height: "400px", overflowY: "auto", marginBottom: "10px"}}>
                ...
            </Card>
            <Card style={{height: `calc(100% - 410px)`}}>
                ...
            </Card>
        </div>

So with this, I achieve a very similar solution already: The second div uses the remaining height and if the content in the first div is too big an inner scrollbar becomes visible.

The problem is, in many states I dont need that 400px so I would like to use auto height for the first div, but limit it to a maximum of 60%, so the second div will at least receive 40% for displaying their content properly. How do I achieve this?

I tried flexGrow: 1 as well already but the problem then is, the second div grows out of the the parent container (though I've set maxHeight: 100%), resulting in outer window scrollbars which I definitely want to avoid.

Thank you in advance!

Answer 1

Finally I made it work!

For everyone who might be interested, I'll explain the key points to achieve such a layout.

Following thread helped me to identify the root cause why my "40%" area grew out of the parent container when applying flex-grow: 1: Make a div fill the height of the remaining screen space

I had to to add overflow-y: auto; for the filling area as well and then everything works as expected. It took me a while to realize this because inside my 40% area I have a child https://www.npmjs.com/package/react-scroll-to-bottom which I thought will take care about the overflow and though I feared having 2 scrollbars then I tried it out and it worked!

So finally this is the CSS magic to achieve this layout:

.flex-ratio-container {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.flex-sized-to-content {
  flex: 0 0 auto;
  overflow-y: auto;
  max-height: 60%;
}

.flex-fill-remaining {
  flex: 1 1 auto;
  overflow-y: auto;
}