如何让 flexbox 底部元素的内容达到其容器高度的 100%

Question

如果我用 2 children 和列流创建一个 flexbox，并将第二个 child 设置为 flex-grow 1，第二个 child 扩展以填充 flexbox。这有效

(ps：不想让 safari 支持的示例混乱，所以使用 Chrome 或 Firefox)

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">bottom (blue)</div>
</div>

但是，如果我随后将 child #inside 放入 #bottom 并将其高度设置为 100%，即使 flexbox 已拉伸，它也不会增加其高度以匹配#bottom.

已添加css

#inside {
  background-color: green;
  height: 100%;
}

html

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside</div>  <!- added ->
  </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}
#inside {
  background-color: green;
  height: 100%;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green)</div>
  </div>
</div>

所以我将 height: 100% 添加到 #bottom 但现在底部与 #outer 一样大，而不是弹性拉伸尺寸。

#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;   /* added */
}

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
  height: 100%;
}
#inside {
  background-color: green;
  height: 100%;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (green) (would not scroll if working)</div>
  </div>
</div>

如何让 #bottom 拉伸以适合 flexbox 并使 child #inside 成为其容器 #bottom 的 100% 高度？

Answer 1

Flex 有一个怪癖，您需要将高度设置为 0。

将 #bottom 规则的高度属性更改为此 height: 0;

为了使 inside 起作用，我将其更改为 "position: absolute" 并在 bottom

中添加了 position:relative

更新

如果您不想使用绝对位置，您可以像这样设置这 2 个 css 规则：

（但请注意，如果像第一个一样使用新的内部 div，这会传播原始问题）

#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
  display: flex;
}
#inside {
  background-color: green;
  flex: 1 0 auto;
}

示例使用 "position: absolute"

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  position: relative;
  background-color: blue;
  flex: 1 0 auto;
  height: 0;
}
#inside {
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside (would not scroll if working)</div>
  </div>
</div>

Answer 2

How do I get #bottom to stretch to fit the flexbox and also get a the child #inside to be 100% height of its container #bottom?

只需在 CSS 中添加两行代码即可。

CSS

#bottom {
    background-color: blue;
    flex: 1 0 auto;
    display: flex; /* NEW */
}

#inside {
    flex: 1; /* NEW */
    background-color: green;
}

演示：http://jsfiddle.net/wf2L8dse/

情况如下：

您有一个弹性容器 (#outer)，其中包含两个弹性项目（#top 和 #bottom）。

#outer 处于 column 对齐。

#bottom有flex: 1（即flex-grow: 1），所以它占据了容器中所有可用的高度。

新元素 (#inside) 成为 #bottom 的子元素，并且必须占据与父元素相同的高度。

解法：

制作 #bottom 一个（嵌套的）flexbox。这会激活默认弹性规则。

其中一个规则是 align-items: stretch，它告诉弹性项目 (#inside) 伸展其容器的整个高度。（高度，在这种情况下，因为 flex-direction 默认为 row。）

然后将flex: 1（或flex-grow: 1）应用到#inside，这样它就扩展了容器的整个宽度。

解决 height: 100% 问题

我不确定您的代码有什么问题。您已将 height: 100% 应用于 #inside，并且在使用百分比高度时与一样，为所有父元素指定了 height，包括 body 和根元素（html).

您可能唯一需要考虑的事情（删除浏览器上的垂直滚动条 window）是将 overflow: hidden 应用到 body。

演示版：http://jsfiddle.net/wf2L8dse/1/

如何让 flexbox 底部元素的内容达到其容器高度的 100%

How to get the content of the bottom element of a flexbox to be 100% height its container

html

css

flexbox