Flexbox柱高 [英] Flexbox column heights
问题描述
我有这个网站: http://kudos-topspindigital.azurewebsites.net/#/netball
如果您在Chrome和IE中开启这项功能,就会看到我的问题。
基本上在chrome中,右边的面板是在相等的高度。我想要的底部面板(橙色和深灰色一)的高度是顶部浅灰色面板的两倍。
一次,IE有它的权利。它实际上将底部面板调整为flex:2.
我如何让chrome来做同样的事情?
由于 flex
是缩写属性, flex:1
变成
< pre-class =lang-css prettyprint-override>
flex-grow:1;
flex-shrink:1;
flex-basis:0%;
0%
列布局。您可以使用 flex-basis:0
修复它:
.row {
flex-basis:0;
}
I have this site: http://kudos-topspindigital.azurewebsites.net/#/netball
If you open this in Chrome and IE you will see my issue. Basically in chrome, the right panels are around equal heights. I would like the bottom panels (the orange and dark gray one) to be twice as height as the top light gray panel. For once, IE has got it right. It actually resizes the bottom panels as flex: 2. How can I get chrome to do the same?
Since flex
is a shorthand property, flex: 1
becomes
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
That 0%
seems to confuse Chrome in column layouts. You can use flex-basis: 0
to fix it:
.row {
flex-basis: 0;
}
这篇关于Flexbox柱高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!