3个div占据父级的所有高度，第一个和最后一个div可变高度

Question

我一直在尝试实施以下设计：

使用javascript，我很容易成功。我尝试实现相同的行为，但没有任何Javascript，只使用CSS，我失败了。我想知道是否有可能。

我当前的实现基于div，但它可以是任何其他html元素（表等）

<div id="parent">
  <div id="one">
   Some variable content
  </div>
  <div id="two">
    Should occupy the remaining height
  </div>
  <div id="three">
    Some variable content
  </div>
</div>

这是实现基础的JSFiddle。

感谢您的帮助。

Answer 1

干杯！ 是的，您可以使用flex。它简单明了，将容器设置为display：flex，然后您可以使用flex-grow属性指定哪些容器子项必须增长，哪些没有。

#parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

请参阅更新的小提琴：https://jsfiddle.net/ypzd68wv/3/

PS：检查您的最低浏览器支持要求;）http://caniuse.com/#feat=flexbox