The Difference Between Width and Flex Basis | Geddski

Updated . Posted . Visible to the public. Repeats.

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 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.

Note that elements with overflowing contents behave differently, e.g. word-wrap: break-word works in a child using width but not in an (overfull) child using flex-basis. An overflow: hidden can fix that for you, for example.

Henning Koch
Last edit
Arne Hartherz
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2019-08-30 07:30)