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