如何获取flexbox的底部元素的内容是其容器的100％高度 [英] How to get the content of the bottom element of a flexbox to be 100% height its container

问题描述

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

（ps：不想使用safari支持混淆示例， p>

  * {box-sizing：border-box;} html，body {margin：0;宽度：100％;高度：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>底部（蓝色）< / div>< / div>  

但是，如果我然后把一个孩子 #inside 在 #bottom 内，并将其高度设置为100％，即使flexbox伸展 #bottom 。

已添加css

 code> #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;宽度：100％;高度：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 =外部> < div id =top> top< / div> < div id =bottom> < div id =inside> inside（green）< / div> < / div>< / div>  

a height：100％到 #bottom ，但现在底部的大小 #outer 而不是flex伸展尺寸。

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

  * {box-sizing：border-box;} html，body {margin：0;宽度：100％;高度：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 =外部> < div id =top> top< / div> < div id =bottom> < div id =inside> inside（绿色）（如果工作则不会滚动）< / div> < / div>< / div>  

获取 #bottom 伸展以适应flexbox，并获得一个 #inside 的100％容器 #bottom ？

解决方案

Flex有一个怪癖，将高度设置为0.

将 #bottom 规则的height属性更改为 height ：0;

对于里面工作，我把它改为绝对，并向底部添加位置：相对底部

更新

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

（请注意，如果使用了像第一个内部div一样的新内部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示例 p>

  * {box-sizing：border-box;} html，body {margin：0;宽度：100％;高度：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（如果工作则不会滚动）< / div> < / div>< / div>  

If I make a flexbox with 2 children and column flow and set the second child to flex-grow 1 the second child expands to fill the flexbox. This works

(ps: Didn't want to clutter the example with safari support so use Chrome or 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>
  

But, if I then put a child #inside inside #bottom and set its height to 100% it doesn't increase its height to match even though the flexbox has stretched #bottom.

added 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>

So I add a height: 100% to #bottom but now bottom is as big as #outer instead of the flex stretched size.

#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>

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?

解决方案

Flex has a quirk where you need to set the height to 0.

Change the #bottom rule's height property to this height: 0;

For the inside to work I changed it to "position: absolute" and as well added a position:relative to the bottom

Update

If you don't want to use absolute position, you can set these 2 css rules like this:

(Note though, that this propagates the original issue if a new inner div is used like the first one)

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

Sample using "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>

这篇关于如何获取flexbox的底部元素的内容是其容器的100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！