CODEWITHSUNDEEP
htmlcssflexbox
Norma Mendonca
Norma Mendonca

Reputation: 329

flex-basis affecting size of sibling item in nested flex container

I have a nested flex layout.

Here is my codepen link https://codepen.io/mendoncafiles/pen/oNoGbPa

There is a flex container, inside which I have list items. Each list item is a flex, with I tag and SPAN tag as flex items. The I tag has flex-basis of 30px.

The text in last list-item is wrapped to next line. The text is displayed in single line with two options:

  1. remove display: flex from wrapping DIV
  2. Change flex-basis: 30px to width: 30px to I tag.

Expected:

enter image description here

Issue:

enter image description here

Upvotes: 0

Views: 71

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372234

It looks like the problem is that the browser is establishing the size of the container before factoring in the full length of the spans.

You can disable flex-shrink or use white-space: nowrap on the spans. But that will cause an overflow.

Consider setting a minimum width on the top level flex container or the ul.

Upvotes: 1

Related Questions