Ajm*_*Iam 3 html css google-chrome css3 flexbox
在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带有id的heres-the-problem是我想要的高度限制在其父级高度的那个.)
首先,让我们来解决这个术语:
...如何强制嵌套在flexbox成员中的元素(通过"flexbox的成员",我指的是一个样式元素的子元素
display:flex)将其大小限制为嵌套在其下的flexbox成员的大小？
元素display: flex称为flex容器(技术上)或flex父(通俗地).
Flex容器的子级称为弹性项.注意单词children(first-level).子项之外的Flex容器的后代不是flex项,并且大多数flex属性不适用于它们.
现在,解决你的问题:
问题是Firefox(显然IE11)对百分比高度规则的解释与Chrome不同.
具体来说,您想要的垂直滚动条不会在Chrome中呈现,因为您使用的百分比高度不符合规范的传统实现方式.
百分比
指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度且此元素未绝对定位,则该值将计算为"auto".auto
高度取决于其他属性的值.
换句话说,如果您希望元素具有百分比高度,则必须在包含块(即父元素)上指定高度.
在您的代码中,body(级别1)具有height: 100vh.
一级下来,.max-flex(级别2)有height: 100%.
四级下降,.large-nested-div(第4级)有height: 100%.
但是,在.variable-flex-content(第3级),没有height财产.你正在定义高度flex: 1 1 0.就Chrome而言,这是链中缺少的链接,违反了规范.Chrome希望看到该height属性,当它没有时,它会计算到的高度auto.
Chrome与Firefox(我还没有测试IE11,所以我不会在这里提到)
传统上,在计算百分比高度时,浏览器已将规范的使用解释为"高度"一词,以表示该height属性的价值.它可以很容易地被解释为高度(通用术语),但height属性要求已成为主要的实现.在处理百分比高度时,我从未见过min-height或max-height在父母身上工作过.
然而,最近在这个问题,并注意到另外一个和另一个,火狐已经扩大了其解释为接受flex的高度,以及.
目前尚不清楚哪种浏览器更符合标准.
height自1998年以来,属性定义尚未更新(CSS2)无关紧要.
解决方案
而不是定义的高度.variable-flex-content用flex: 1 1 0%,请尝试使用height: 100%或height: calc(100% - 60px)或绝对定位.