html - 使用CSS在父div中组织兄弟div

Question

所以，我认为这将是一个非常简单的过程，但它似乎不是，我现在真的很困惑!场景如下:

我有一个父 div，在那个 div 里面还有 3 个 div，顶部的 Div 是 X 像素高 100% 宽度，底部的 div 是 Z 像素高 100% 宽度，我需要中间的 div 作为剩余部分顶部和底部 div 之间始终保持高度(中间 div 的内容可以扩展到 div 边界之外，因此我需要能够在其中放置一个滚动条)并且父 div 可以调整大小。

我以为我可以很容易地解决这个问题，但事实并非如此!任何关于我如何实现这一目标的建议将不胜感激，因为我根本无法让它工作!

Answer 1

flexbox进行救援。

.parent{
  display: flex;
  flex-direction: column;
  height: 700px;
}

.one{
  height: 100px;
  background: red;
}

.two{
  height: 50px;
  background: green;
  overflow-y: scroll;
}

.three{
  height: 100%;
  background: blue;
}

<div class="parent">
  <div class="one">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
  <div class="two">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
  <div class="three">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>