我创建了这个代码片段
.wrapper {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px
}
.modal {
width: 300px;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: red;
}
.content {
flex: 1 1 0px;
overflow-y: scroll;
}
.box {
height: 300px;
}
.box-yellow {
background-color: yellow;
}
.box-blue {
background-color: blue;
}<div class="wrapper">
<div class="modal">
<span>heading</span>
<div class="container">
<div class="content">
<div class="box box-yellow"></div>
<div class="box box-blue"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>我们的目标是创建一个具有页眉、可滚动内容和页脚的模式.
标记的顺序是必需的.
我的问题是，为什么一定要这样:
.content {
flex: 1 1 0px;
overflow-y: scroll;
}
为什么就不能这样呢:
.content {
flex: 1;
overflow-y: scroll;
}
最终目标实现了，但作为Flexbox的初学者，我想知道为什么需要flex: 1 1 0px.
我读过一些关于flex-base的文档，但看起来flex-base有几种行为.在这个特定的 case 中发生了什么？