如果父級使用 flex，則溢出 div

Question

我想使用 flex 1 將我的視口分成 2 個部分。在底部區域需要帶有溢出項的容器。 但是效果不佳。 我也有基於 flex parent required fix height 的問題溢出，例如。 50vh？ 我試圖找到與我的問題相匹配的解決方案，但似乎都不合適。

 *{ margin: 0; padding: 0; }.container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; }.view{ flex: 1; background-color: red; }.management{ flex: 1; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; }.main-content{ overflow: auto; }

 <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> </div> </div> </div>

Answer 1

看看這是不是你要找的結果

 *{ margin: 0; padding: 0; }.container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; }.view{ height:50%; background-color: red; }.management{ display:flex; flex-direction:column; height:50%; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; }.main-content{ height:100%; overflow-y:auto; }

 <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>last Item</p> </div> </div> </div>

Answer 2

正確答案。 主容器應該溢出項目

 *{ margin: 0; padding: 0; }.container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; }.view{ height: calc(100vh - 50vh); background-color: red; }.management{ height: calc(100vh - 50vh); width: 100%; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; }.main-content{ height: calc(100% - 40px); width: 100%; overflow-y: auto; }

 <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> </div> </div> </div>