Question

我希望flexbox容器占用高度未知的标头容器下方的可用空间。容器内超过可用空间的列应可滚动。我在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>

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

Answer 2

您不需要固定高度或calc()。 Flex属性足够好（再加上一点点技巧，即可在Edge和Firefox中激活滚动功能）。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 4em; /* flex-basis can be anything */
  background-color: lightgreen;
}

.flex-container {
  display: flex;
  background: #CCCCCC;

 /* for Edge and FF */
  height: 1px; /* these browsers won't trigger an overflow without a fixed height */
  flex-grow: 1;
}

.column {
  flex: 0 0 9em;
  background: #fff;
  overflow-y: auto;
}


div {
  border: 1px solid #000;
}
* {
  box-sizing: border-box;
}

<header></header>
<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 3

您不需要使用calc函数。当您有一个flex容器时，如果它的一个子容器不具有flex属性，则它将仅填充所需的区域，如果下一个子容器具有flex：1，它将填充其余区域。

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: green
}
.content{
    flex: 1;
    background: red
}

<div class="container">
    <div>Header here</div>
    <div class="content">Content here</div>
</div>

Flexbox高度限制了100％的可用空间

3 个答案: