如何强制显示器弯曲留在内部

Question

我正在尝试向元素添加两个div。第一个div应该有一个固定的height和position。第二个div应该占用其余的空间(如果需要(，但永远不要超过它。我准备了以下示例来显示所需的输出。

#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>

此示例显示当第二个div的内容太大时出现的问题。

#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>

我会接受任何解决这个问题的答案，无论使用什么 css 和 html 组合(不会改变元素的顺序(，只要没有 javascript 和不再添加高度属性(即top: 40px;，min-height: calc(100% - 40px);...(，除了0、auto和100%。

Answer 1

编辑：在div的css中添加了min-height: 0以及更新的小提琴。

如果我正确理解了这个问题，这就是你要找的吗？

#free {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}

杰斯菲德尔：https://jsfiddle.net/nick_zoum/Lod38e9a/3/