Question

如果我创建一个包含2个子项和列流的flexbox并将第二个子项设置为flex-grow 1，则第二个子项将展开以填充弹性框。这工作

（ps：不想在safari支持下混淆示例，所以请使用Chrome或Firefox）

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

但是，如果我然后将#inside放在#bottom内并将其高度设置为100％，即使Flexbox已拉伸{{1}，它也不会增加其高度以匹配}。

添加了css

#bottom

HTML

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

＆＃13;

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

＆＃13;

* {
  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%;
}

＆＃13;

所以我向<div id="outer"> <div id="top">top</div> <div id="bottom"> <div id="inside">inside (green)</div> </div> </div>添加height: 100%，但现在底部与#bottom一样大，而不是弹性拉伸尺寸。

#outer

＆＃13;

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

＆＃13;

* {
  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%;
}

＆＃13;

如何让<div id="outer"> <div id="top">top</div> <div id="bottom"> <div id="inside">inside (green) (would not scroll if working)</div> </div> </div>伸展以适应Flexbox，并让孩子#bottom成为其容器#inside的100％高度？

Answer 1

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

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

对于inside工作，我将其更改为＆＃34; position：absolute＆＃34;并在position:relative

中添加了bottom

<强>更新

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

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

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

示例使用＆＃34;位置：绝对＆＃34;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

如何让#bottom伸展以适应Flexbox，并让孩子#inside成为其容器#bottom的100％高度？

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

<强> CSS

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

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

DEMO：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，并在使用百分比高度时为required by the spec，为所有父元素指定了height，包括body和根元素（{ {1}}）。

您可能想要考虑的唯一事项（删除浏览器窗口中的垂直滚动条）正在将html应用于overflow: hidden。

DEMO：http://jsfiddle.net/wf2L8dse/1/

如何将flexbox底部元素的内容设置为其容器的高度为100％

2 个答案: