根据MDN,
在下面的示例中,我期望
flex: 1
缩写应该设置flex-basis: 0
。然而,它实际上设置了flex-basis: 0%
,更令人惊讶的是这具有不同的行为。在下面的示例中,我期望
div.middle
收缩并滚动,因为它被赋予了overflow-y: auto
和flex: 1
,这也应意味着flex-basis: 0
。但它没有 - 整个主体滚动,因为它拒绝缩小。如果取消注释显式的flex-basis: 0
,则它将正常工作。
body {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.outer {
min-height: 100%;
display: flex;
background: #99f;
flex-direction: column;
}
.middle {
background: #f99;
flex: 1;
/*flex-basis: 0;*/
overflow-y: auto;
}
<div class='outer'>
<div class='top'>top</div>
<div class='middle'>
A
<div style='height:800px'></div>
B
</div>
<div class='bottom'>bottom</div>
</div>
我在Chrome 84.0和Firefox 68.11.0esr中测试了这个,它们都有相同的意外行为。
- 为什么
flex-basis: 0%
和flex-basis: 0
不同? - 为什么
flex: 1
会设置flex-basis: 0%
而不是flex-basis: 0
?