The impact of the width property used with flex-grow?

Question

Please see the code below:

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
  border: 1px solid;
  width: 1000px;
}

<header>
  <ul class="child">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
  </ul>
</header>

Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.

Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px). It appears to me that the behaviour is as follows:

If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.
If a width is added to the flex items meaning they cannot all fit on one row then honour the width.
If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.

Have I understood this correctly and why does the width effect the flex items like this?

I have done my own research and found questions like this: What are the differences between flex-grow and width?. However, I have not found an answer to my question. I have also read about the flex grow property here: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-grow-property

the width define the initial size and flexgrow will later consume any remaining free space. You should also consider the flex-shrink factor because defining a very big with will not create an overflow due to the shrink effect. Check this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax .. it gives an easier expalantion for the algorithm than the Spec — Temani Afif, Aug 28 '20 at 12:01
@Temani Afif, why are all boxes the same size (372.8 pixes) if a width of 1px is specified (see point one from my post)? Thanks. — w0051977, Aug 28 '20 at 12:35
because they all start at 1px and then all will grow the same so all will have the same width. any width will giove this result unless there is no more free space and the element will start t wrap — Temani Afif, Aug 28 '20 at 12:58

score 0 · Answer 1 · answered Aug 30 '20 at 00:15

It's important to note that width, height and flex-basis in a flex container represent the initial size of the item.

Once that size are determined, then flex-grow and flex-shrink enter into the picture and do their work, if possible. That can change the initial size.

Now, let's break down your question into the main points:

Notice the width of 1000px. When I load the page there are five rows as I would expect. If I remove the width property, then the boxes appear on one row as expected.

OK

Now if I add a width of 1px, then the only change is that all boxes are the same size i.e. 372.28 pixels (not 1px).

Do you mean "e.g., 372.28 pixels (not 1px)", not "i.e.", because the size of the item will vary depending on the size of the viewport. In other words, the size of each item will scale as you resize the window. But this is not an essential point.

All boxes are indeed equal length. This happens because the width is set to 1px.

If you were to remove the width rule, then the boxes would vary in length based on their content length. This is because the default width / flex-basis is auto.

If any width is added to the flex items that means they can all fit on one row then make sure all boxes are the same size.

Not necessarily.

The width property doesn't always relate to items all fitting on one row. That behavior is controlled by the flex-wrap and flex-direction properties.

Also, the width property doesn't always relate to items all having equal length. Other factors, such as flex-grow, can have an impact.

If a width is added to the flex items meaning they cannot all fit on one row then honour the width.

Not necessarily.

flex-grow, flex-shrink and flex-wrap can all have an impact.

If you want the width / flex-basis of an item to remain fixed, set both flex-shrink and flex-grow to 0 (which disables those functions).

If a width is not added then the boxes can be any size i.e. the Wednesday box is biggest in this case because Wednesday is the longest word.

Not necessarily.

flex-grow, flex-shrink and flex-wrap can all have an impact.

More details:

The impact of the width property used with flex-grow?

1 Answers1