如何使Flexbox容器滚动？
我有一个垂直flexbox容器，我在其上设置了特定的高度，并将其设置为在溢出时垂直滚动。 问题是flex容器如果内容溢出将不会滚动。 这里是一个演示我在说什么的蹦极：http://plnkr.co/edit/3t4cuxMSGuNr88u0Whdl?p=preview。
.flex-container {
display: flex;
flex-direction: column;
overflow-y: scroll;
height: 600px;
width: 400px;
}
.block-container {
overflow-y: scroll;
height: 600px;
width: 400px;
margin-left: 50px;
}
.item1 {
height: 200px;
background-color: red;
margin-bottom: 1px;
}
.item2 {
height: 200px;
background-color: green;
margin-bottom: 1px;
}
.item3 {
height: 200px;
background-color: blue;
margin-bottom: 1px;
}<div style="display: flex">
<div class="flex-container">
<p>Flex Container</p>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
</div>
<div class="block-container">
<p>Block Container</p>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
<div class="item1">Text</div>
<div class="item2">Text</div>
<div class="item3">Text</div>
</div>
</div> 尝试设置基于flex-basis值，并使其不增长或缩小：
.item1, .item2, .item3 {
flex: 0 0 200px;
}
或者， flex: 1 0 200px; 如果你确实需要它们根据需要增长。
的jsfiddle
您始终可以提供min-height并且flex会尊重这一点。 查看更新的Plunkr
http://plnkr.co/edit/7rgo7BpWWtXsQqYbJvdU?p=preview
链接地址: http://www.djcxy.com/p/75649.html