css - 限制 flex 盒布局中的 flex 元素高度

Question

我正在尝试创建一个 flexbox 布局，如 jsfiddle 所示. 这是 HTML:

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
  </div>
  <div class="footer">
    footer
  </div>
</div>

这是 CSS:

.container {
  background-color: green;
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: yellow;
  flex: 0 0 50px;
}

.content {
  background-color: blue;
  flex: 0 0 90%;
  overflow: scroll;
}

.footer {
  background-color: red;
  flex: 0 0 40px;
}

它有效，但我也会限制整个布局的大小不超出“.container”元素的固定高度。

我怎样才能做到这一点？

谢谢， 杰拉德

Answer 1

您只需要通过向其添加 flex: 1; 属性，使 .content 填充容器内的整个允许空间。

工作示例:

var i;
for (i = 0; i < 100; i++) {
  $(".content").append("<div>hello " + i + "</div>");
}

.container {
  background-color: green;
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border:3px solid black;
}

.header {
  background-color: yellow;
  flex: 0 0 50px;
}

.content {
  background-color: blue;
  flex: 1;
  overflow: scroll;
}

.footer {
  background-color: red;
  flex: 0 0 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
  </div>
  <div class="footer">
    footer
  </div>
</div>

jsFiddle:https://jsfiddle.net/azizn/0aumg6b0/