What are the differences between flex-basis and width?

Question

There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is

flex-basis a

Answer 1

Nobody seems to mention that there is one key difference between flex-basis and width (or height, depending on the current writing mode), if we ignore the flexible sizing aspect (flex-grow: 0; flex-shrink: 0;).

It originates from the exception in Flex Layout, that the automatic minimum size for flex items defaults to min-content instead of zero, like usually. In other words, the default min-width: auto computes to min-content instead of 0.

The result is, that flex-basis is (by default) bound below by min-content. If you specify a value smaller than min-content, for example flex-basis: 0, it will compute to min-content. This essentially means that (by default) you can't make the box's content overflow, since the box has at least the size of the content.

This is a key difference to width, which can size the box arbitrarily small (by default), since min-width defaults to 0. If the value of width is smaller than min-content, the contents will overflow the box.

This behavior is mentioned in the spec, but only implicitly in the following comment at the wrong place at the end of 7.1.1. Basic Values of flex.

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See § 4.5 Automatic Minimum Size of Flex Items.)

As mentioned in the comment, setting a minimum size lowers the bound, and setting it to zero effectively disables it, making flex-basis behave again as expected.

But there are drawbacks. Firstly, there is no minimum size property for the main axis. You have to use the correct min-width/min-height or min-block-size/min-inline-size property for the current flex-direction. If you changed the flex-direction, you would need to again find the correct minimum size property.

Secondly, flex-basis can't be used anymore to distribute space towards proportionally sized boxes instead of simply adding to their initial size. For more details, see Figure 7 in the spec.

Here is a minimal example. Set min-width: 0 to make flex-basis behave as expected again.

.container {
  display: flex;
}

.container div {
  background-color: lightgrey;
  border: 1px solid black;
  margin: 0 10px;
  /* disable any flexible sizing */
  flex-grow: 0;
  flex-shrink: 0;
  /* TOGGLE ME */
  /* min-width: 0; */
}

.mincontent {
  width: min-content;
}

.smallerflexbasis {
  flex-basis: 3ex;
}

.smallerwidth {
  width: 3ex;
}

  
Lorem ipsum
  
Lorem ipsum
  
Lorem ipsum