如果父级使用 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>