0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>What happens if you add more flex items to a container than can fit in a single row?</p>
1
<p>What happens if you add more flex items to a container than can fit in a single row?</p>
2
<ul><li>They will be shrunk to the smallest possible width.</li>
2
<ul><li>They will be shrunk to the smallest possible width.</li>
3
<li>Even if you assign an explicit width to them, the flexbox mechanism can override this setting and reduce the width.</li>
3
<li>Even if you assign an explicit width to them, the flexbox mechanism can override this setting and reduce the width.</li>
4
<li>If they can no longer be fit in a container after it is shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.</li>
4
<li>If they can no longer be fit in a container after it is shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.</li>
5
</ul><p>This is somewhat similar to the behavior of cells in a table.</p>
5
</ul><p>This is somewhat similar to the behavior of cells in a table.</p>
6
<p>You can change this behavior using the flex-wrap flex container property. By default, it has the value nowrap, that is, the flex items may not overflow onto a new line.</p>
6
<p>You can change this behavior using the flex-wrap flex container property. By default, it has the value nowrap, that is, the flex items may not overflow onto a new line.</p>
7
<p>The wrap value allows flex items to overflow onto a new line if they do not fit into a container.</p>
7
<p>The wrap value allows flex items to overflow onto a new line if they do not fit into a container.</p>
8
<p>Let’s see how this works in practice.</p>
8
<p>Let’s see how this works in practice.</p>