Flex box: Fill remaining space but justify content center
Simply add a pseudo element that has a value of flex-grow: 1;
(before the other items in your container) and set the same flex-grow value to .item-fill
.
The pseudo-element (.container:before
here), will fill the top part of the container as much as it can and the other item with a flex-grow
value will fill the rest. The two other items will be as small as their content.
/* Default values are skipped */
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container:before {
content: "";
}
.container:before,
.item-fill {
flex: 1;
}
.item {
background: red;
}
.item-fill {
background: yellow;
}
<div class="container">
<div class="item">
First item
</div>
<div class="item">
Second item
</div>
<div class="item-fill">
Third item which should fill up the rest of the parent space without pushing the first and second item upwards
</div>
</div>