Fill the remaining height or width in a flex container

css

responsive-design

best-practices

flexbox

byAlex Kataev·Dec 31, 2024

Easily consume the extra space in a flex container by setting flex: 1; on a child element. Whether you want to fill available height or width, set flex-direction: column; or flex-direction: row; (default) respectively on the container.

.flex-container {
  display: flex;
  height: 100%; /* For vertical fill, or to conduct a space orchestra as an A-list conductor */
}

.flex-expand {
  flex: 1; /* Like 'Abracadabra', but for programmers */
}

<div class="flex-container">
  <div>Header</div>
  <div class="flex-expand">Content that boldly stretches where no content has stretched before</div>
</div>

Voila! Your content is as expansive as the universe itself.

Understand your flex properties: prevention, alignment, and size

How to stop your content from shrinking

Life is too short for squished content. To maintain a steadfast width for your content, it's simple: say flex-shrink: 0; and let your box stand tall.

.flex-fixed {
  flex-shrink: 0; //Size stability, no diets here!
  width: 200px; /* "I like being 200px" */
}

That's right, even in a changing container, fixed-width div will strike a pose and hold it!

Alignment: the Marie Kondo of your content

To have everything aligned just right, align-items or align-self are your magic wands.

.flex-item-align {
  align-self: center; // Centered, as balanced as a Zen master
}

.flex-container-align {
  align-items: center; /* Align all items, like drill sergeant commanding */
}

And the award for perfect positioning goes to...

Sizing: the secret to a good fit

When dealing with size, it's important to know when to use width over flex-basis.

.flex-initial {
  flex-basis: 150px; // "Just the right amount of space, please!"
}

Understand these intricacies, and you'll achieve what every designer dreams of: predictability.

Provide priority seating to your content

Life isn't always fair. Sometimes, one element needs more space than the other ones.

.flex-primary {
  flex-grow: 2; // Double the fun!
}

Just like that, you've created a perfect balance in the force!

Dominate your flex elements: separators, robustness, and alignment

Design heart-winning separators

Often, we use grid-like layouts or separators to make our content easy on the eyes.

.flex-separator {
  flex-grow: 1;
  border-right: 1px solid #ccc; /* A separator as smooth as a James Bond one-liner */
}

Just remember - creating spaces is an art!

Keep robustness in check with min-widths

Overflowing content can ruin your day faster than spilling coffee on your keyboard. min-width: 0; is your personal content guard.

.flex-robust {
  min-width: 0; // Hold the overflow. Handle overflow like a secret agent handling a mission.
}

Be adaptable, be flexible, and help your design stand up to any challenge.

Flex-end alignment for a grand finish

Sometimes, it's all about the last impression. Bring elements to the end of your container with flex-end for a clean, polished look.

.flex-footer {
  align-self: flex-end; // I'll be back... at the end!
}

Being flexible was never this stylish.

explain-codes / Css / Fill the remaining height or width in a flex container

Linked

How do I keep two side-by-side div elements the same height?



Css3 Flex: Pull child to the right



How to align flexbox columns left and right?



Make container shrink-to-fit child elements as they wrap



Css vertical alignment text inside li



Css - Make divs align horizontally



Make flex items take content width, not width of parent container



Understand your flex properties: prevention, alignment, and size Dominate your flex elements: separators, robustness, and alignment