I want the blue div to shrink and allow the green div to take up more space when there is not much content in the blue div, and vice versa. However, neither div can become larger than 50% of the container if there is a lot of content in both divs.
<code>.container {
display: flex;
flex-direction: column;
height: 300px;
}
.topDiv {
background-color: blue;
color: white;
flex: 1;
overflow: auto;
}
.bottomDiv {
background-color: green;
color: white;
flex: 1;
overflow: auto;
}</code>
<code>.container {
display: flex;
flex-direction: column;
height: 300px;
}
.topDiv {
background-color: blue;
color: white;
flex: 1;
overflow: auto;
}
.bottomDiv {
background-color: green;
color: white;
flex: 1;
overflow: auto;
}</code>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.topDiv {
background-color: blue;
color: white;
flex: 1;
overflow: auto;
}
.bottomDiv {
background-color: green;
color: white;
flex: 1;
overflow: auto;
}<code><div class="container">
<div class="topDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
<div class="bottomDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
</div></code>
<code><div class="container">
<div class="topDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
<div class="bottomDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
</div></code>
<div class="container">
<div class="topDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
<div class="bottomDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
</div>
</div>