Read more

The Difference Between Width and Flex Basis | Geddski

Henning Koch
August 30, 2019Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

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.

Posted by Henning Koch to makandra dev (2019-08-30 09:30)