如果父级使用 flex，则溢出 div

Question

I want to devide my viewport into 2 section using flex 1. In bottom area require container with overflow item. However isn't work well. Also I have question overflow based on flex parent required fix height eg. 50vh?. I have try to find solution to match with my problem but it seems none of it suitable.

 *{ 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

see if this is the result you are looking for

 *{ 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

The correct answer. The main-container should overflow the items

 *{ 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>