CSS vertical flexbox overflow-y does not work

Question

我已经通过html和body元素将页面的页面高度设置为100％。它是一个类似于移动应用的页面，所以我希望它能够在一个页面上呈现（没有主滚动条）。这三个部分

<nav> 
<div id="main"> 
<footer> 

被安排在柔性柱，但是，里面的main有比可以在页面中显示较长的项目，overflow-y: scroll;什么都不做。有想法该怎么解决这个吗？

Answer 1

您需要的高度设置为最大高度

body { 
margin: 0; 
padding: 0; 
} 
#main-wrapper{ 
width: 500px; 
max-height: 200px; /*Adjust Height*/ 
overflow-y: scroll!important; 
overflow-x: hidden; 
} 
#main { 
-webkit-column-count: 4; 
-moz-column-count: 4; 
column-count: 4; 
} 

HTML

<div id="main-wrapper"> 
<div id="container"> 
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum 
</div> 

入住这fiddle。希望这对你有用。