My goal is to add two divs to an element. The first div needs to have a fixed height and position. The second div should fill the remaining space, but not exceed it. I have created an example below to illustrate the desired result.
#container {
border: 1px solid black;
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
}
#fixed {
flex: 0 0 50px;
background: red;
}
#free {
flex: 1;
}
#scroll {
max-height: 100%;
overflow-y: scroll;
background: blue;
}<div id="container">
<div id="fixed">This should always be visible</div>
<div id="free">
<span>This should always be visible</span>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>This example demonstrates the issue that occurs when the content of the second div is too large.
#container {
border: 1px solid black;
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
}
#fixed {
flex: 0 0 50px;
background: red;
}
#free {
flex: 1;
}
#scroll {
max-height: 100%;
overflow-y: scroll;
background: blue;
}<div id="container">
<div id="fixed">This should always be visible</div>
<div id="free">
<span>This should always be visible</span>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nec dolor a dignissim. Nunc auctor felis a turpis tincidunt auctor. Suspendisse venenatis volutpat sodales. Maecenas sodales est non quam vestibulum fermentum. Nulla venenatis
sapien sit amet augue ultricies molestie. Sed neque nulla, venenatis non est a, imperdiet dictum tortor. Nam at odio rutrum, convallis neque blandit, viverra urna. Maecenas scelerisque risus eu mollis ornare. Nullam tincidunt tempus vehicula. Aenean
at porttitor ex. Fusce tincidunt nulla velit, id gravida lacus vestibulum nec.
</div>
</div>
</div>I'm open to any solution that addresses this issue without introducing JavaScript and without adding more height properties (apart from 0, auto, and 100%), as long as it doesn't alter the order of the elements.