0

The MDN docs for flex-wrap said

nowrap

The flex items are laid out in a single line which may cause the flex container to overflow.

While on this particular page it has 2 nowrap examples show 2 different effects, the first one on the top show overflow effect, while the second one on the bottom show that the items shrink to fit inside the container.

Why is that ?

Qiulang
  • 10,295
  • 11
  • 80
  • 129
  • two factors: 1) the flex-shrink 2) the min-width constraint. In other words, the item can shrink but there is a limit, if we reach this limit we have overflow – Temani Afif Sep 11 '19 at 11:02
  • Hi thanks for answering my question. But if you check the first example I mentioned. It did not set min-width or flex-shrink:0 so why it did not shrink but overflow ? – Qiulang Sep 11 '19 at 12:23
  • it's precisely because you didn't set min-width and there is a default one set that prevent the shrinking past the content size – Temani Afif Sep 11 '19 at 12:25

0 Answers0