How to force display flex to stay inside [duplicate] - html

Question

This question already has an answer here:
Fitting child into parent
(1 answer)
Closed 3 years ago.
I am trying to add two divs to an element. The first div should have a fixed height and position. The second div should take up the rest of the space (if needed), but never exceed it. I've prepared the following example, to display the desired output.
#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">Should always appear</div>
<div id="free">
<span>Should always appear</span>
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
This example displays the problem that arises when the contents of the second div are 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">Should always appear</div>
<div id="free">
<span>Should always appear</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 would accept any answer that solves this problem regardless of what combination of css and html is used (that doesn't change the order of the elements), as long as no javascript and no more height properties are added (i.e top: 40px;, min-height: calc(100% - 40px); ...), with the exception of 0, auto and 100%.

Answer 1

Edit: Added min-height: 0 to div's css as well as an updated fiddle.
If I understand the question correctly, is this what you're looking for?
#free {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
Jsfiddle: https://jsfiddle.net/nick_zoum/Lod38e9a/3/