Flexbox: flex-basis vs. width vs. min-width vs. max-width

Within a Flexbox layout, there are multiple CSS attributes that may affect a child's basis (the initial width before flexing). You might be confused how flex-basis, width, min-width and the intrinsic width of your content play together.

The attached article Show archive.org snapshot explains the differences. In summary:

• If a flex-basis is set, that is used as the basis
• If no flex-basis is set, the width is used as the basis
• If neither flex-basis nor width is set, the content's computed width is used as the basis

In all cases min-width and max-width define a lower and upper bound for the effective width chosen within the Flexbox.

Dealing with overflowing children

Flexbox children default to flex-basis: auto, which is the element's intrinsic size Show archive.org snapshot . E.g. an image width a width of 100 pixels has an intrinsic size of 100px.

The intrinsic size of text is as wide as if all words will render in a single line. If there is not enough space and the child is willing to flex-shrink, words can break. Words will also break against a fixed dimension in either flex-basis or width.

All Flexbox children have a default of min-width: auto. This means they can force the Flexbox container to grow larger than 100%. Consider setting min-width: 0 for a more intuitive default.