如何使flexbox儿童的父母身高达到100％？
我正在尝试在Flexbox内填充Flex项目的垂直空间。
.container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div>
这里是JSFiddle
flex-2-child不填充要求的高度，除了以下两种情况：
-
flex-2的高度为100％（这很奇怪，因为flex项目默认为100％+在Chrome中是bug） -
flex-2-child有绝对的位置，这也是不方便的
目前这在Chrome或Firefox中不起作用。
我在这里回答了一个类似的问题。
我知道你已经说过position: absolute; 不方便，但它的工作。 有关修复resize问题的更多信息，请参见下文。
另请参阅此jsFiddle进行演示，但我只添加了在Chrome中打开的webkit前缀。
你基本上有两个问题，我将分开处理。
- 让灵活项目的孩子填充高度100％
- 设置
position: relative;在孩子的父母身上。 - 设置
position: absolute;对孩子。 - 然后，您可以根据需要设置宽度/高度（在我的示例中为100％）。
- 设置
- 在Chrome中修复resize滚动“怪癖”
- 把
overflow-y: auto;在滚动div。 - 可滚动的div必须有明确的高度指定。 我的示例已经有100％的高度，但如果没有应用您可以指定
height: 0;
- 把
有关滚动问题的更多信息，请参阅此答案 。
如果我理解正确的话，你想要flex-2-child来填充它的父母的高度和宽度，以便红色区域被绿色完全覆盖？
如果是这样，你只需要设置flex-2使用flexbox：
.flex-2 { display: flex; }
然后告诉flex-2-child变得灵活：
.flex-2-child { flex: 1; }
见http://jsfiddle.net/2ZDuE/10/
原因是flex-2-child不是flexbox项目，但是其父项是。
与David Storey的回答类似，我的工作是：
.flex-2 { align-items: stretch; display: flex; }
或者align-items ，您可以使用align-self在您想要拉伸的.flex-2-child项目上。
我认为Chrome的行为与CSS规范更加一致（虽然不太直观）。 根据Flexbox规范， align-self属性的默认stretch值仅更改元素的“cross size属性”（本例中为height ） 的使用值 。 而且，据我了解的CSS2.1规范 ，百分比高度计算从父母的height的指定值，而不是使用的价值。 父母height的指定值不受任何柔性属性的影响，并且仍然是auto 。
设置显式height: 100%可以正式计算孩子的百分比高度，就像设置height: 100%到html可以计算出CSS2.1中body的百分比高度。
一个想法是display:flex; 与flex-direction: row; 使用.flex-1和.flex-2填充container div，但这并不意味着.flex-2的默认height:100%; 即使延伸至全高，并且具有height:100%;的子元素（ .flex-2-child ） 您需要将父级设置为height:100%; 或使用display:flex; 与flex-direction: row; 在.flex-2 div上。
从我所知道的情况来看display:flex不会将所有的子元素的高度扩展到100％。
一个小的演示，从.flex-2-child删除高度，并使用display:flex; 在.flex-2 ： http : //jsfiddle.net/2ZDuE/3/
HTML
<div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div>
CSS
.container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { flex:1 0 100px; background-color: blue; } .flex-2 { -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1 0 100%; background-color: red; } .flex-2-child { flex: 1 0 100%; height:100%; background-color: green; }
使用Bootstrap 4 ：
一个是red color延伸到flex-box的高度
点击这里工作笔
祝你好运…
这是我使用css +的解决scheme
首先如果第一个孩子（flex-1）应该是100px不应该弯曲。 在css +中，实际上你可以设置灵活的和/或静态的元素（列或行），你的例子变得如此简单：
<div class="container"> <div class="EXTENDER"> <div class="COLS"> <div class="CELL _100px" style="background-color:blue">100px</div> <div class="CELL _FLEX" style="background-color:red">flex</div> </div> </div> </div>
容器的CSS：
.container { height: 200px; width: 500px; position:relative; }
显然包括css + 0.2核心
听小提琴
