How to make item fill remaining space css

CssHow-ToBeginner · 3 min read

How to Make an Item Fill Remaining Space in CSS

Use flex-grow: 1 on a flex item inside a container with display: flex to make it fill the remaining space. Alternatively, use CSS Grid with grid-template-columns and 1fr to allocate leftover space to an item.

📐

Syntax

Flexbox method: Set the container to display: flex. Then on the item you want to fill space, use flex-grow: 1. This tells the item to grow and take all leftover space.

Grid method: Use display: grid on the container. Define columns with grid-template-columns. Use 1fr for the column that should fill remaining space.

css

/* Flexbox syntax */
.container {
  display: flex;
}
.item-fill {
  flex-grow: 1;
}

/* Grid syntax */
.container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.item-fill {
  /* automatically fills the 1fr column */
}

💻

Example

This example shows a flex container with three items. The middle item uses flex-grow: 1 to fill all the space left by the other two fixed-width items.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fill Remaining Space Example</title>
<style>
  .container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;
  }
  .item {
    background-color: #8ac6d1;
    color: white;
    padding: 10px;
    text-align: center;
  }
  .fixed {
    width: 100px;
  }
  .fill {
    flex-grow: 1;
    background-color: #ff6f61;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item fixed">Fixed 100px</div>
    <div class="item fill">Fills Remaining Space</div>
    <div class="item fixed">Fixed 100px</div>
  </div>
</body>
</html>

Output

A horizontal bar with three boxes: left and right boxes are 100px wide in blue, the middle box is red and stretches to fill all space between them.

⚠️

Common Pitfalls

Not setting the container to display: flex or display: grid means flex-grow or fr units won't work.
For flexbox, forgetting to set flex-grow: 1 on the item means it won't expand.
Using fixed widths on all items leaves no space to fill.
In grid, not defining columns with 1fr means no flexible space allocation.

css

/* Wrong: no flex container */
.item-fill {
  flex-grow: 1; /* has no effect if parent is not flex */
}

/* Right: flex container set */
.container {
  display: flex;
}
.item-fill {
  flex-grow: 1;
}

📊

Quick Reference

Flexbox: Use display: flex on container and flex-grow: 1 on the item to fill space.

Grid: Use display: grid and set grid-template-columns with 1fr for flexible columns.

Remember: The container must be flex or grid for these to work.

✅

Key Takeaways

Set the container to display flex or grid to enable flexible layouts.

Use flex-grow: 1 on a flex item to make it fill remaining space.

In grid, use 1fr in grid-template-columns to allocate leftover space.

Without proper container display, flex-grow or fr units won't work.

Avoid fixed widths on all items if you want flexible space filling.