根据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> …