display flex children behave like to have inline-block property

Asked Jun 19 '19 at 15:18

Active Jun 19 '19 at 15:25

Viewed 28 times

I'm getting a weird behavior using flex.

It looks like when I use display: flex, its children behave like to have display: inline-block property.

It looks like the children of a flex container expand their width to fit the content of their sub items...

How could I avoid this "inline-block behavior" using flex?

Thanks!!

asked Jun 19 '19 at 15:18

user2010955

adding `max-width:100%` maybe? – Temani Afif Jun 19 '19 at 15:26
Adding `.container .item { min-width: 0; }` will fix your _codepen_ sample and make it behave similar to `display: block`...hence I closed this as a dupe. It describes well what goes on. – Asons Jun 19 '19 at 15:33
1

A simple comparison would with a `table`, which as well won't be smaller that its _cell content_. – Asons Jun 19 '19 at 15:50
1

Thanks @LGSon, the answer in the link you shared is clear and complete – user2010955 Jun 19 '19 at 20:32

0 Answers0