在Google Chrome中,我如何强制嵌套在flexbox成员中的元素(通过"flexbox的成员",我的意思是使用样式元素的子元素display:flex)将其大小限制为嵌套在其下的flexbox成员的大小？例如,假设我有以下内容:
<div style="display:flex; flex-direction:column; height:100vh;">
<div style="height:60px;">Static header</div>
<div style="flex: 1 1 0; overflow:hidden;">
<div style="overflow:auto; height:100%;" id="problem-is-here">
Lots and lots of content, way too much to fit in the viewport
</div>
</div>
</div>
因为div最外层的第一个孩子div具有恒定的高度,所以它最终高度为60px,并且因为第二个孩子的diva flex-grow为1,所以它获得剩余的可用空间(在这种情况下,100%的视口减去60px) .我可以确认,根据Inspect Element,这个元素的尺寸足够大,可以占据视口空间的其余部分.
在Firefox和IE11中,由于height:100%,最内层的element(id="problem-is-here")采用为其父级计算的高度.因此,由于它太小而无法显示其内容并被overflow设置为auto,因此它(而不是整个body)获得垂直滚动条.这就是我要的.
但是,在Chrome中,最内层元素的渲染高度足以包含其所有内容,这些内容的高度大于其父级.因此,由于其父级具有overflow:hidden,因此不会出现滚动条,并且无法访问多余的内容.当父高度由flexbox而不是CSS height属性确定时,如何告诉Chrome渲染此最内层元素的高度最多等于其父级的高度？请注意,我不能给内部div或其父级一个确定的height值,因为在我正在处理的应用程序中,其他flexbox成员的数量可能会有所不同.
注意:我已经尝试了其他答案中的一些建议,例如设置所有元素min-height:0而不是auto,或者确保flex-basis设置为0,但这些都没有奏效.看到
http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview
举例说明问题.(div …