html - Flexbox 高度约束 100% 的可用空间

Question

我想要一个 flexbox 容器占用高度未知的标题容器下方的可用空间。容器内超过可用空间的列应该是可滚动的。我在 Fiddle 中展示了预期的结果.

fiddle 使用以下行来计算可用空间。

height: calc(100vh - 4em);

这是一个问题，因为 a) 标题并不总是 4em，并且 b) vh 没有考虑滚动条。

* {
  box-sizing: border-box;
}

div {
  border: 1px solid #000;
}

.header {
  background: #ededed;
}

.flex-container {
  display: flex;
  background: #CCC;
  height: calc(100vh - 3em);
  /* remove line to see outcome w/o sketchy calculation */
}

.column {
  min-width: 9em;
  width: 9em;
  background: #fff;
  overflow-y: auto;
}

<div class="header">
  I'm a header
</div>
<div class="flex-container">
  <div class="column">
    Some content
  </div>
  <div class="column">
    more content
  </div>
  <div class="column">
    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content
    it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more
    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's
    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
    So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more
    content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's
    unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
  </div>
  <div class="column">

  </div>
  <div class="column">
    Some content
  </div>
</div>

Answer 1

使用 flex 的原因之一是不指定固定尺寸。 flex: 1(或flex-shrink、flex-grow、flex-basis)可以用来填充可用宽度或高度:

.container {
  display: flex;
  flex-direction: column;
  
  /* for demo purposes */
  height: 300px;
  border: 1px solid red;
}

header {
  padding: 20px;
}

.content {
  flex: 1;
  background-color: #f0f0f0;
}

<div class="container">
  <header>Header of any height</header>
  <div class="content">Content which fills remaining height</div>
</div>

因此，您应该将 header 和内容包装在一个 flex 容器中，并将内容设置为 flex: 1: https://jsfiddle.net/j4sLgh0o/