我有一个带有直接子项的flexBox,它使用align-items：stretch声明.
在这个flexBox的直接子项中,我想有一个div容器也使用其父级的全高(通过设置高度：100％).
但是,div容器不会拉伸到其父级的100％高度,除非我还在flexBox的直接子级上设置了高度：100％.
它有点像虫子吗？我必须使用align-items设置flexBox的直接子项：stretch和height：100％以实现我想要的效果吗？这对我来说似乎是多余的.
这是一个例子：
html,body {
margin: 0;
height: 100%;
}
.flexBox {
display: flex;
flex-direction: row;
height: 100%;
background-color: green;
}
.flexBox-child {
// height: 100%; uncommenting this will get it to work
align-items: stretch;
background-color: blue;
}
.flexBox-grand-child {
height: 100%;
background-color: red;
}
<div class="flexBox"> <div class="flexBox-child"> <div class="flexBox-grand-child"> I want to be stretched till the bottom </div> </div> </div>
http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview
谢谢！
解决方法
您的.flexBox-child只是一个flex项,但不是flex容器.因此,忽略仅适用于flex容器的align-items：stretch.
然后,.flexBox-grand-child的百分比为height,其行为如下：
The percentage is calculated with respect to the height of the
generated Box’s containing block. If the height of the containing
block is not specified explicitly (i.e.,it depends on content
height),and this element is not absolutely positioned,the value
computes to ‘auto’.
包含块是flex项(.flexBox-child),它没有明确的高度,其高度似乎取决于内容.
但是,这种依赖性仅仅是由于新的min-height：auto.但在考虑最小高度之前,弹性项目的高度将是(由于初始的align-self：stretch)容器的高度(明确指定),忽略内容.
然后,Firefox认为.flexBox-child的高度不依赖于其内容,因此其子项中的高度百分比应该起作用.然后你的代码工作.
但是,Chrome并不这么认为.
我不确定哪一个做得对.仅在旧的CSS2.1和CSS基本框模型中定义高度没有帮助,这是一个不一致的草稿.
为安全起见,请更好地明确设置.flexBox-child的高度.或者将它变成一个弹性容器.
