Overflow div if the parent using flex-CodePudding

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 >
   <div >
      50% viewport
   </div>
   <div >
     <header>Title</header>
     <div >
       <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>

CodePudding user response：

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 >
   <div >
      50% viewport
   </div>
   <div >
     <header>Title</header>
     <div >
       <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>

CodePudding user response：

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 >
   <div >
      50% viewport
   </div>
   <div >
     <header>Title</header>
     <div >
       <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>