Question

我想要达到的目的是让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

Answer 1

没关系，我找到了它：

添加到第二项此css：

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

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

Flex项目 - 填充剩余的容器高度

1 个答案: