Flex item - 填充剩余的容器高度答案

【问题标题】：Flex item - fill the remaining container heightFlex item - 填充剩余的容器高度
【发布时间】：2014-08-21 19:33:03
【问题描述】：

我想要实现的目标是让具有特定未知高度的 flex 容器包含两个项目。第一项具有固定高度 100px，第二项应填满容器的其余部分。如何做到这一点？这是我的代码（注意：我已经为容器设置了固定高度以进行测试，正如我之前所说，我不知道 CSS 中的这个高度，所以我不能将高度 400px 设置为第二项):

<div class="flex-container">
  <div class="flex-item" style="height:100px">111 111 11</div>
  <div class="flex-item">x</div>
</div>

CSS

.flex-container {
  padding: 0;
  margin: 0;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-direction: column;

  align-items: stretch;
  align-content: stretch;
  flex-wrap: wrap;
  height: 500px;
  width: 300px;
}

  .flex-item {
    background: tomato;
    padding: 5px;
    width: 300px;

    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }

谢谢

PS：我要纯CSS解决方案，不要JS

【问题讨论】：

标签： html css flexbox

【解决方案1】：

没关系，我找到了：

添加到此 css 的第二项：

 -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

http://codepen.io/anon/pen/lqdiI

【讨论】：