Please see my jsfiddle
I want the green middle div
to fill the remaining space of the wrapper div
no matter how much content it has.
If it matters I'm including bootstrap too.
Give the container:
display:flex;
flex-direction:column;
and for the element:
flex:1;
The demo: https://jsfiddle.net/ugjfwbg4/1/
body {
background-color: red;
height: 100%;
}
.wrap {
height: 100vh;
width: 100%;
padding: 20px;
background-color: yellow;
display:flex;
flex-direction:column;
}
.top {
width: 100%;
height: 50px;
background-color: blue;
}
.mid {
width: 100%;
background-color: green;
flex:1;
display:flex;
flex-direction:column;
}
.left{
flex:1;
width: 50%;
background-color: red;
}
.bottom {
width: 100%;
height: 50px;
background-color: blue;
}
<div class="wrap">
<div class="top"></div>
<div class="mid">
<div class="left">left</div>
</div>
<div class="bottom"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With