0

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!

Dr.Gee
  • 59
  • 3

1 Answers1

0

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;
}
Dr.Gee
  • 59
  • 3