Chrome忽略基于弹性的列布局 [英] Chrome ignoring flex-basis in column layout
问题描述
我无法让Chrome在 flex-direction中注意
布局。它在 flex的弹性基础部分:1 1 25%
:column 行
布局中正常工作。
下面的代码段演示了问题:黄色,蓝色和粉红色条线是基于50px,25%和75%的弹性,在列和行弹性方向中显示。
如果您在Firefox(或IE11或Edge)中运行,列和行都会按预期划分区域:
但是如果您在Chrome(47)或Safari(9.0.3)左边似乎完全忽略了flex-basis - 栏的高度似乎与flex-basis没有关系:
只有区别左右是 flex-direction
。
.container {width:400px; height:200px;显示:flex;背景:#666; position:relative;}。layout {flex:1 1 100%; / * within .container * / margin:10px; display:flex;}。row {flex-direction:row;} column {flex-direction:column;}。 background:#ffc;}。small {flex:11 25%; background:#cff;}。large {flex:11 75%; background:#fcf;}
< div class =容器> < div class =layout column> < div class =exact> 50px< / div> < div class =small> 25%< / div> < div class =large> 75%< / div> < / div> < div class =layout row> < div class =exact> 50px< / div> < div class =small> 25%< / div> < div class =large> 75%< / div> < / div>< / div>
height:100%
到 .column
,这使Chrome注意到flex基础, - flex大于其容器:
.column {
flex-direction:column;
height:100%;
}
我收集这是一个
.container {width: 300px; height:300px; display:flex;}。layout {flex:1 1 100%; / *在其flex parent * / display:flex; background:#ffc;}。row {flex-direction:row;}。高度:100%; / *为webkit * /}尝试的解决方法; small {flex:1 1 30%; background:#cff;}。large {flex:1170%;背景:#fcf;} div {/ * border / padding只是使div更容易看到 - 你可以删除所有这一切,而不改变问题* / box-sizing:border-box; border:1px solid#999; padding:10px;}
< div class = > < div class =layout row> < div class =small> row:30%< / div> < div class =large layout column> < div class =small> row:70%; col:30%< / div> < div class =large> row:70%; col:70%< / div> < / div> < / div>< / div>
需要考虑的三件事:
-
所有高度的总和大于100% strong>
在
b $ b.column
布局中,您有三个flex项目。他们的高度75%+ 25%+ 50px
。这本身超过您应用的height:100%
。但没有一个浏览器似乎关心。您为两个布局指定了
margin:10px
。所以从顶部和底部边距有一个额外的20px的高度。在.column
布局中,此确实确实导致Chrome溢出。
调整那些额外的20px,溢出就消失了:
.column {
flex-direction:column;
height:calc(100% - 20px); / * new * /
}
.container {width:400px; height:200px;显示:flex;背景:#666; position:relative;}。layout {flex:1 1 100%; / * within .container * / margin:10px; display:flex;}。row {flex-direction:row;}。 height:calc(100% - 20px); / * NEW * /}。exact {flex:1 1 50px; background:#ffc;}。small {flex:11 25%; background:#cff;}。large {flex:11 75%; background:#fcf;}
< div class =容器> < div class =layout column> < div class =exact> 50px< / div> < div class =small> 25%< / div> < div class =large> 75%< / div> < / div> < div class =layout row> < div class =exact> 50px< / div> < div class =small> 25%< / div> < div class =large> 75%< / div> < / div>< / div>
-
百分比高度:Chrome / Safari与Firefox / IE
Chrome / Safari中的flex项目无法识别其百分比高度的原因是Webkit浏览器遵循规范的更传统的解释:
百分比
指定百分比高度。相对于生成的框的包含块的高度计算百分比。如果未明确指定包含块的高度,且该元素未绝对定位,则该值计算为auto。
自动
高度取决于其他属性的值。
换句话说,如果您希望元素具有百分比高度
这种语言的传统解释是,height是指
height 属性。虽然从语言高度意味着什么是不清楚的,height
属性要求已经是主要的实现。我从来没有见过父母在处理时的min-height
,max-height
但是,最近,如本问题所述(和另一个一个和另一个和另一个),Firefox(和IE,显然)已经扩大其解释接受
flex
高度。
目前尚不清楚哪个浏览器更符合标准。
高度并不重要
定义自1998年以来未更新(
底线,Chrome和Safari根据父级的
height
属性。 Firefox和IE11 / Edge使用父计算的flex高度。
现在,对这个问题最简单的跨浏览器解决方案是,在我看来,对于百分比高度,使用
height
属性。
I'm having trouble getting Chrome to pay attention to the flex-basis part of flex: 1 1 25%
in a flex-direction: column
layout. It works fine in a row
layout.
The snippet below demonstrates the problem: the yellow, blue, and pink bars are flex-basis 50px, 25%, and 75%, shown in both column and row flex directions.
If you run it in Firefox (or IE11 or Edge) both column and row divide up the area as expected:
But if you run it in Chrome (47) or Safari (9.0.3), the column layout on the left seems to ignore the flex-basis entirely -- the heights of the bars seem to have no relation to the flex-basis:
The only difference between left and right is the flex-direction
.
.container {
width: 400px;
height: 200px;
display: flex;
background: #666;
position: relative;
}
.layout {
flex: 1 1 100%; /* within .container */
margin: 10px;
display: flex;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
}
.exact {
flex: 1 1 50px;
background: #ffc;
}
.small {
flex: 1 1 25%;
background: #cff;
}
.large {
flex: 1 1 75%;
background: #fcf;
}
<div class="container">
<div class="layout column">
<div class="exact">50px</div>
<div class="small">25%</div>
<div class="large">75%</div>
</div>
<div class="layout row">
<div class="exact">50px</div>
<div class="small">25%</div>
<div class="large">75%</div>
</div>
</div>
I tried adding height: 100%
to .column
, which makes Chrome pay attention to the flex-basis, but causes a different problem -- the flex gets bigger than its container:
.column {
flex-direction: column;
height: 100%;
}
I gather this is a long-standing webkit bug. Is there any way to work around it? (I'm trying to create some generalized layout components, so hard-coding specific numbers of children or specific pixel heights isn't workable.)
[EDIT] Here's an additional example showing the general problem (and avoiding the margin and total-greater-than-100% issues in the example above):
.container {
width: 300px;
height: 300px;
display: flex;
}
.layout {
flex: 1 1 100%; /* within its flex parent */
display: flex;
background: #ffc;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
height: 100%; /* attempted workaround for webkit */
}
.small {
flex: 1 1 30%;
background: #cff;
}
.large {
flex: 1 1 70%;
background: #fcf;
}
div {
/* border/padding just makes divs easier to see --
you can remove all of this without changing the problem */
box-sizing: border-box;
border: 1px solid #999;
padding: 10px;
}
<div class="container">
<div class="layout row">
<div class="small">row: 30%</div>
<div class="large layout column">
<div class="small">row: 70%; col: 30%</div>
<div class="large">row: 70%; col: 70%</div>
</div>
</div>
</div>
Three items to consider:
Sum of all heights greater than 100%
In your
.column
layout, you have three flex items. Their heights are75% + 25% + 50px
. This by itself exceeds theheight: 100%
you applied. But none of the browsers seem to care. This does not cause an overflow.Margin space
You have specified
margin: 10px
for both layouts. So there's an extra 20px of height from the top and bottom margins. In the.column
layout, this does indeed cause an overflow on Chrome.Adjust for those extra 20px, and the overflow is gone:
.column { flex-direction: column; height: calc(100% - 20px); /* new */ }
.container { width: 400px; height: 200px; display: flex; background: #666; position: relative; } .layout { flex: 1 1 100%; /* within .container */ margin: 10px; display: flex; } .row { flex-direction: row; } .column { flex-direction: column; height: calc(100% - 20px); /* NEW */ } .exact { flex: 1 1 50px; background: #ffc; } .small { flex: 1 1 25%; background: #cff; } .large { flex: 1 1 75%; background: #fcf; }
<div class="container"> <div class="layout column"> <div class="exact">50px</div> <div class="small">25%</div> <div class="large">75%</div> </div> <div class="layout row"> <div class="exact">50px</div> <div class="small">25%</div> <div class="large">75%</div> </div> </div>
Percentage Heights: Chrome/Safari vs Firefox/IE
The reason the flex items in Chrome / Safari don't recognize their percentage heights is because Webkit browsers are adhering to a more traditional interpretation of the spec:
percentage
Specifies a percentage 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 and this element is not absolutely positioned, the value computes to "auto".auto
The height depends on the values of other properties.In other words, if you want an element to have a percentage height, then you must specify a height on the parent.
The traditional interpretation of this language is that "height" means the value of the
height
property. Although it's unclear from the language exactly what "height" means, theheight
property requirement has been the predominant implementation. I've never seenmin-height
,max-height
or other forms of height work on a parent when dealing with percentage values.Recently, however, as noted in this question (and another one and another one and another one), Firefox (and IE, apparently) has broadened its interpretation to accept
flex
heights, as well.It's not clear which browser is more compliant with the standard.
It doesn't help matters that the
height
definition hasn't been updated since 1998 (CSS2).Bottom line, Chrome and Safari resolve percentage heights based on the value of the parent's
height
property. Firefox and IE11/Edge use the parent's computed flex height.For now, the simplest cross-browser solution to this problem would be, in my view, using the
height
property across the board for percentage heights.
这篇关于Chrome忽略基于弹性的列布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!