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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)