如何强制 display flex 留在里面

Question

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

#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

编辑：将 min-height: 0 添加到 div 的 css 以及更新的 fiddle.

如果我没看错的话，这是你要找的吗？

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

Jsfiddle: https://jsfiddle.net/nick_zoum/Lod38e9a/3/

如何强制 display flex 留在里面

How to force display flex to stay inside

html

css

overflow