gip*_*ouf 8 html css html5 css3 flexbox
我有一个带有直接子项的弹性箱align-items: stretch.
在这个flexbox的直接子项中,我想有一个div容器,它也使用其父级的全高(通过设置height: 100%).
但是,div容器不会伸展到其父级的100%高度,除非我也设置height: 100%了flexbox的直接子级.
这是一种虫子吗？我必须用align-items: stretchAND 设置flexbox的直接子项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
谢谢!
创建Flex容器时,只有子元素成为弹性项.儿童以外的后代不会成为弹性物品,柔性属性也不适用于它们.
只需应用于display: flexflex项目,该项目也将其转换为Flex容器.然后默认的flex属性align-items: stretch将应用于子项(现在是flex项).
你写了:
我想有一个div容器也使用其父级的全高...
您不需要使用height: 100%或添加align-items: stretch(这是默认规则).只需添加display: flex到.flexbox-child,并且.flexbox-grand-child将扩大全可用高度.
修改过的演示:http://plnkr.co/edit/n0Wt3x3CUr1ZfBD2RrGo？p = preview
回覆: height: 100% possible bug
关于指定height: 100%子元素的需要,我在这里看不到任何错误.一切似乎都符合规范.这是一个完整的解释:使用CSS height属性和百分比值
这是一个复杂的案例.
您.flexbox-child只是一个弹性项目,但不是一个弹性容器.因此,align-items: stretch忽略仅适用于弹性容器的情况.
然后,.flexbox-grand-child有一个百分比height,其行为如下:
百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".
包含块是flex item(.flexbox-child),它没有明确的高度,其高度似乎取决于内容.
但是,这种依赖性只是由于新的min-height: auto.但在考虑之前min-height,flex项目的高度将(由于初始化align-self: stretch)容器的高度(明确指定),忽略内容.
然后,Firefox认为高度.flexbox-child不依赖于其内容,因此height其子项中的百分比应该起作用.然后你的代码工作.
但是,Chrome并不这么认为.
我不确定哪一个做得对.它height只是在旧的CSS2.1和CSS基本框模型中定义,这是一个不一致的草案.
为了安全起见,请更好.flexbox-child地明确设置高度.或者将它变成一个弹性容器.