html - 如果你有两个 div，如何使用最大高度和高度

Question

我有以下 DOM:

<div id="parent" style="height: 200px;">
  <div id="header" style="height: 40px;"></div>
  <div id="content" style="max-height: 100%; overflow-y: auto"></div>
</div>

这导致内容的高度为 200px，尽管我希望它为 160px。基本上父 div 的高度可变，我希望内容 div 具有基于它的高度。标题高度是固定的。

我不能使用 js 来解决这个问题，因为实际的 dom 非常复杂，使用 JS 只会让它变得更加复杂。

Answer 1

Flexbox 可以做到这一点。

#parent {
  height: 200px;
  display: flex;
  flex-direction: column
}
#header {
  flex: 0 0 40px;
  background: red;
}
#content {
  flex: 1;
  background: green;
}

<div id="parent">
  <div id="header"></div>
  <div id="content"></div>
</div>