div 的 HTML/CSS 高度依赖于其他 div

Question

我正在尝试构建一个占据浏览器 100% 高度的侧边栏。在这个侧边栏中，有两个 div，它们的大小会根据里面的内容而改变。

<div class="sidebar">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

http://i.imgur.com/LIPLo4K.png (对不起，我尽力展示了一个例子)

如您所见，侧边栏以 child-2 开始，占据了大约 80% 的高度(即使其内容没有填满 div)和 child- 1 只占高度的20%左右。但是，随着 child-1 内容的增长，child-2 会变小。如果 child-2 的内容溢出，我可能会使用 overflow-y: scroll 来包含它的内容。同样，一旦 child-1 达到 max-height，我希望它也能够垂直滚动。

我不太清楚如何做到这一点并仅使用 CSS 来处理不断变化的高度。任何帮助或指导表示赞赏。谢谢!

Answer 1

为什么不使用 flex

body{ margin: 0; }
.sidebar{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.child-1{
  background-color: #8989Ef;
}
.child-2{
  background-color: #EF8989;
  flex: 1;
}

<div class="sidebar">
  <div class="child-1">
    <p>this is content</p>
    <p>this is content and this content is long</p>
    <p>this is content</p>
    <p>this is content and this content is long</p>
  </div>
  <div class="child-2"></div>
</div>