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。希望這對你有用。