flex-grow in CSS – How to Add Left-Over Space to Flex Item

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

What is a left-over space?

A left-over space refers to the space remaining after browsers have deducted the sum of all flexible items' sizes from the flexbox's size.

Here's an example:

CSS

section {
  display: flex;
  justify-content: flex-start;
  background-color: orange;
  margin: 10px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.flex-item3 {
  flex-grow: 0.5;
}

HTML

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try Editing It

We used the flex-grow property to make browsers add half of <section>'s left-over space to flex-item3's size.

note

• flex-grow's default value is 0.
• Zero (0) and positive numbers are the only values flex-grow accepts.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter