CSS Flexbox: Make an Element Fill the Remaining Space

Updated: October 18, 2022 By: A Goodman Post a comment

You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.

Example

Preview:

The code:

HTML:

<!-- index.html -->
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Kindacode.com</title>
  </head>

  <body>
    <div class="container">
      <div class="item item--1">Item 1</div>
      <div class="item item--2">Item 2</div>
      <div class="item item--3">Item 3</div>
      <div class="item item--4">Item 4</div>
    </div>
  </body>
</html>

CSS:

/* style.css */
.container {
  width: 90vw;
  height: 300px;
  margin: 30px auto;
  background: #eee;
 
  display: flex;
}

.item {
  margin: 10px;
  padding: 30px;
  background: orangered;
  color: white;
}

.item--4 {
  flex-grow: 1;
  background: purple;
}

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.