Flexbox fill available space vertically
Clash Royale CLAN TAG#URR8PPPFlexbox fill available space vertically
Now in a flexbox row I can write
<div layout="row">
<div>some content</div>
<div flex></div> <!-- fills/grows available space -->
<div>another content</div>
</div>
I would like to achieve the same but vertically, like on this picture
Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which have a fix height! I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox?
bottom: 0;
2 Answers
2
So you can try this:
flex-direction: column for the flex container.
flex-direction: column
flex: 1 for the element that needs to fill the remaining space.
flex: 1
See demo below where the flexbox spans the viewport height:
flexbox
body {
margin: 0;
}
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex {
flex: 1;
}
.row, .row > * {
border: 1px solid;
}
<div class="row">
<div>some content</div>
<div class="flex">This fills the available space</div>
<!-- fills/grows available space -->
<div>another content</div>
</div>
Cheers!
You just need to use flex-direction: column on parent and flex: 1 on middle div.
flex-direction: column
flex: 1
body,
html {
padding: 0;
margin: 0;
}
.row {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.row > div:not(.flex) {
background: #676EE0;
}
.flex {
flex: 1;
background: #67E079;
}
<div class="row">
<div>some content</div>
<div class="flex"></div>
<!-- fills/grows available space -->
<div>another content</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
