How to Fix Flexbox Ignoring Width / Height Set

Share

2024-11-29

For reference, a list of problems you can encounter with display: flex; in CSS, and how to solve them.

HTML

The HTML structure we'll use in examples looks like this:

<div class="my-flexbox">
    <div class="child child-1"></div>
    <div class="child child-2"></div>
    <div class="child child-3"></div>
</div>

My Flexbox Children Don't Expand to Fill Available Space

Children don't expand by default. The flex-grow property controls this behavior. It must be set in the children that you want to grow beyond their minimum width.

For example, let's say we only want child-2 to grow, and the other children to stay the same width.

.child-2 {
    flex-grow: 1;
}

If we want all children to expand uniformly sharing the available space, we set flex-grow in all of them.

.child {
    flex-grow: 1;
}

If we want all children to grow, but we want one child to grow at a different rate than the others, we set a different flex-grow value.

.child {
    flex-grow: 1;
}

.child-2 {
    flex-grow: 2;
}

When the web browser computes the layout, it will see that there are 3 children, two of them with flex-grow: 1, and one of them with flex-grow: 2. If sum these values, we have a "total" of 4. The web browser will take the available space and "split" it in 4 parts, giving children with flex-grow: 1 a single part, and the child with flex-grow: 2 two parts instead.

My Flexbox Children are Shrinking!

This happens because flex-shrink is set to a value other than zero. It always happens by default because flex-shrink is 1 by default. There are two ways to fix this. First, we could simply remove the shrinking completely:

.child-3 {
    flex-shrink: 0;
}

With the above code, child-3 won't shrink anymore.

Alternatively, we can use min-width (or min-height if you're using a vertical flexbox) to ensure the child is always at least a given width.

.child-3 {
    min-width: 300px;
}

With the code above, child-3 can't become narrower than 300px.

My Flexbox Ignores The Width / Height Properties of My Children

When you use a flexbox, if the property flex-basis is used in a child, the width or height property of the child will be ignored.

.child-3 {
    /* This will be ignored. */
    width: 300px;

    /* because this will be used. */
    flex-basis: 500px;
}

Note, again, that if you want to make sure a child fixed size, you must remove flex-shrink besides setting flex-basis.

.child-3 {
    flex-basis: 300px;
    flex-shrink: 0;
}

My Flexbox Child Ignores flex-grow and Keeps Growing Horizontally

This happens because the intrinsic width of the element forces the flexbox child to keep growing to accommodate it when min-width is set to auto. It's set to auto by default. This can happen for all sorts of reasons, including having an image (<img>) or video (<video>) element that is larger than the flexbox child. To fix this, simply set min-width to something else.

.child-3 {
    min-width: 0;
}

The code above will make child-3 stop calculating its min-width from the intrinsic width of its descendants.

overflow: auto Doesn't Work Inside Flexbox

If you have an element inside the flexbox child with overflow: auto so scrollbars are displayed if the element becomes larger than its parent, those scrollbars will never appear by default because the flexbox child's width grows with the intrinsic width of every element inside of it. Set min-width: 0; like explained above to fix it.

max-width: 100% Doesn't Work Inside Flexbox

Similarly, setting max-width: 100% in a flexbox child's descendant won't work because max-width: 100% is calculated based on the width of the parent, and in this case the parent's width is being calculated based on the intrinsic width of its descendants. Set min-width: 0; like explained above to fix it.

white-space: pre-wrap Doesn't Work Inside Flexbox

If you have white-space: pre-wrap inside a flexbox the line wrapping won't work by default because the text element needs to know how large its parent is to figure out where to wrap the line, but the parent will keep growing to accommodate the text in its descendant, so lines will never be broken .Set min-width: 0; like explained above to fix it.

Vertical Flexbox Child Grows Taller than Flexbox

This happens because the intrinsic height of the flexbox child forces it to keep growing when min-height is set to auto. It's set to auto by default. To fix this, simply set min-height to something else.

.child-3 {
    min-height: 0;
}

This is the same problem as the previous one, only on a different axis.

One scenario where this can happen is if you want to use a flexbox to contain an image and a caption, such that the flexbox is always a fixed height, and the image must expand to fill the available space. Let's say we have the following HTML structure:

<figure>
    <img src="cat.jpeg" alt="A photo of a cat." width=2560 height=1440>
    <figcaption>Mr. Whiskers.</figcaption>
</figure>

We could do it like this:

figure {
    display: flex;
    flex-direction: column;
    height: 300px;
}

figure > img {
    width: 100%;
    flex-grow: 1;
    object-fit: scale-down;
    min-height: 0;
}

If we don't set min-height: 0; on img, it will expand vertically to fit its intrinsic size and will end up pushing figcaption outside of its flexbox parent.

Other Common Issues

Flexbox Children Don't Wrap

Children don't wrap by default. The flex-wrap property controls this behavior.

.my-flexbox {
    flex-wrap: wrap;
}

View Comments