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>

Tags:

Html

Css

Flexbox

Recent Posts