html - 如何使所有水平子 div 适合父级？

Question

这是我的 HTML 片段，

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

如果我有这样的 CSS:

.bigger
{
  height: 300px;
}

CSS 中是否有任何方法可以使所有子 div 的高度与父 div 的高度相同，即所有子 div 的高度都应为 300 像素？

Answer 1

使用 Flexbox 的解决方案:

.bigger {
  height: 400px;
  background: #eea;

  display: flex;
  flex-direction: column;
}

.bigger div {
  margin: 4px;
  border: 1px dotted green;
  flex: auto;   
}

演示:http://codepen.io/anon/pen/nAjLt(请注意，Codepen 会添加供应商前缀)