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