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.

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

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.