flex-wrap and how flexbox items overflow or wrap

October 30, 2021

By default flex containers only render a single line across their main axis.

This means if your flex container is not wide enough (for flex-direction:row) or tall enough (for flex-direction:column) that your flex items will overflow the container.

Flex-direction:row

Flex-direction:row will render only a single flex line on the horizontal axis. Rendering the flex items from left to right.

example of display: direction:row items overflowing their parent container element.

.flex { max-width: 280px; display: flex; flex-direction: row; background-color: lightblue; border-radius: 8px; } .flex > * { border: 1px solid black; margin-right: 8px; border-radius: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

Flex-direction:column

Flex-direction:column will render only a single flex line in the vertical axis. Rendering the flex items from top to bottom.

example of display: direction:column items overflowing their parent container element.

.flex { max-height: 150px; max-width: 130px; display: flex; flex-direction: column; background-color: lightblue; border-radius: 8px; padding: 8px; } .flex > * { border: 1px solid black; margin-bottom: 8px; border-radius: 8px; padding: 8px; } .flex > *:last-child { margin-bottom: 0; }

When flex items overflow

If all flex items can’t fit in the flex container the flex items will try to shrink in width (for flex-direction row) or in height (for flex-direction:column) if allowed by the flex item’s flex property.

If the flex items are not allowed to shrink or can’t shrink enough they will overflow the parent flex container’s border if there is not enough width (for flex-direction:row) or enough height (for flex-direction:column).

How to get flex items to wrap instead of overflowing

Introducing the flex-wrap property, when flex-wrap has either wrap or wrap-reverse specified and the flex items would be wider (flex-direction:row) or higher (flex-direction:column) than the flex container element a new flex line will be rendered/drawn.

flex-wrap: wrap (flex-direction:row)

When more than one flex line is required, we specify flex-wrap:wrap so the subsequent lines will be rendered/drawn on the cross axis (vertical). This means the flex lines will be stacked on top of each other from top to bottom.

example of display: direction:row and flex-wrap:wrap specified.

.flex { max-width: 560px; display: flex; flex-direction: row; flex-wrap: wrap; background-color: lightblue; border-radius: 8px; padding: 8px; } .flex > * { border: 1px solid black; margin-right: 8px; border-radius: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

The image below shows the direction the lines are drawn and where the new line starts:

example of how display: direction:row and flex-wrap:wrap lines are drawn

flex-wrap:wrap (flex-direction:column)

When more than one flex line is required, we specify flex-wrap:wrap so the subsequent lines will be rendered/drawn on the cross axis (horizontal). This means the flex lines will be side by side, from left to right.

example of display: direction:column and flex-wrap:wrap specified.

.flex { max-height: 450px; max-width: 500px; display: flex; flex-direction: column; flex-wrap: wrap; background-color: lightblue; border-radius: 8px; padding: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; padding: 8px; }

The image below shows the direction the lines are drawn and where the new line starts:

example of how display: direction:column and flex-wrap:wrap lines are drawn


Profile picture

Written by Tjaart van der Walt who lives and works in Toronto and likes working with web technologies. You should follow them on Twitter