我正在尝试填充Flexbox中的弹性项的垂直空间。
.容器{高度：200px；宽度：500px；显示：柔性；弯曲方向：行；}.flex-1型{宽度：100px；背景色：蓝色；}.flex-2型{位置：相对；挠曲：1；背景色：红色；}.flex-2-儿童{高度：100%；宽度：100%；背景色：绿色；}<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-2具有100%的高度，而且在Chrome中存在bug）flex-2-child具有绝对位置，这也不方便
这在Chrome或Firefox中目前不起作用。
当前回答
一个想法是显示：flex；弯曲方向：行；正在用.flex-1和.flex-2填充容器div，但这并不意味着.flex-2具有默认高度：100%；，即使它延伸到全高。
并且具有高度为100%的子元素（.flex-2-child）；，您需要将父对象设置为高度：100%；或使用显示器：flex；弯曲方向：行；在.flex-2分区上。
据我所知，display：flex不会将所有子元素的高度扩展到100%。
一个小演示，去掉了.flex-2-child的高度，并使用了display：flex；在flex-2上：http://jsfiddle.net/2ZDuE/3/
其他回答
一个想法是显示：flex；弯曲方向：行；正在用.flex-1和.flex-2填充容器div，但这并不意味着.flex-2具有默认高度：100%；，即使它延伸到全高。
并且具有高度为100%的子元素（.flex-2-child）；，您需要将父对象设置为高度：100%；或使用显示器：flex；弯曲方向：行；在.flex-2分区上。
据我所知，display：flex不会将所有子元素的高度扩展到100%。
一个小演示，去掉了.flex-2-child的高度，并使用了display：flex；在flex-2上：http://jsfiddle.net/2ZDuE/3/
.容器{高度：200px；宽度：500px；显示：-moz框；显示：-webkit flexbox；显示：-ms flexbox；显示：-webkit flex；显示：-moz flex；显示：柔性；-webkit flex方向：行；-moz-flex方向：行；-ms flex方向：行；弯曲方向：行；}.flex-1型{柔性：100像素；背景色：蓝色；}.flex-2型{-moz-box flex:1；-webkit flex:1；-moz-flex：1；-ms flex:1；弹性：100%；背景色：红色；}.flex-2-儿童{弹性：100%；高度：100%；背景色：绿色；}<div class=“container”><div class=“flex-1”></div><div class=“flex-2”><div class=“flex-2-child”></div></div></div>
http://jsfiddle.net/2ZDuE/750/
有趣的事实：身高-100%在最新的铬合金中工作；但不是在狩猎中；
所以顺风的解决方案是
“弹性物品拉伸”
https://tailwindcss.com/docs/align-items
并递归地应用于孩子的孩子的孩子。。。
我认为Chrome的行为更符合CSS规范（尽管它不那么直观）。根据Flexbox规范，align self属性的默认拉伸值仅更改元素的“交叉大小属性”（在本例中为高度）的使用值。而且，据我了解CSS2.1规范，百分比高度是根据父级高度的指定值计算的，而不是使用的值。父对象高度的指定值不受任何弹性财产的影响，仍然是自动的。
设置显式高度：100%可以正式计算孩子的身高百分比，就像将高度：100%设置为html可以计算CSS 2.1中身体的身高百分比一样。
另一种方法（其他选项不适合我的情况，因为我需要更通用的解决方案，我真的希望尽可能避免使用position:absolute，以及display:flex和align-items:stretch，因为其他syling在我的情况下不起作用）：
具有显示的父对象：flex还可以让元素显示灵活，对齐self:stretch和margin-top:0+margin-bottom:0
最小可重复性示例：
.鹦鹉{显示：柔性；//宽度可以是任意的。宽度：150px；}.全高，仅含bg胶体{宽度：100%；显示：柔性；对齐自身：拉伸；//这可以仅为0，也可以仅设置顶部和底部值边距：0 2px；背景色：绿色；}＜div＞<div class=“parrent”><div class=“full-height just with bg-color”></div>text高度</div></div>
