Why Your Flex Container Is Not Wrapping (And How to Fix It)

You have built a tidy row of cards, tags, or buttons with flexbox, expecting them to flow onto a second line when they run out of room. Instead, they keep squeezing onto one line, shrinking into unreadable slivers or spilling straight off the edge of the screen. The layout works when there are two items and breaks the moment you add a fifth.

Flexbox is designed to stay on a single line unless you tell it otherwise, and that one default explains most wrapping problems. A few other settings, such as fixed item sizes and shrink behaviour, can also stop wrapping from looking the way you expect. This guide explains each cause in plain language and shows the exact changes that fix it.

Quick Answer

Your flex container is not wrapping because flexbox is single-line by default. Add flex-wrap: wrap to the container so items can move onto new lines when they no longer fit. Then give items a sensible size with flex-basis or width and control growing and shrinking with the flex shorthand so the wrapped rows look even and intentional.

How Flexbox Wrapping Actually Works

When you set display: flex on a container, the browser places all of its direct children along one axis, called the main axis, which runs horizontally for the default flex-direction: row. The initial value of flex-wrap is nowrap, which instructs the browser to keep every item on that single line no matter what.

With nowrap, the browser has only two ways to make items fit. It can shrink them, because flex-shrink defaults to 1, or it can let them overflow if they cannot shrink enough. What it will never do on its own is start a second line. Wrapping is an opt-in behaviour, and forgetting to opt in is by far the most common reason a flex layout refuses to wrap.

When you enable wrapping, the container becomes multi-line. Whenever the next item cannot fit on the current line, it moves to a new line below. You can align the lines as a group with align-content, and items within each line with justify-content and align-items.

A Minimal Working Example in Words

Imagine a container holding six cards. The container uses display: flex and flex-wrap: wrap with a gap of 16px. Each card uses flex: 1 1 220px, which means it may grow, may shrink, and starts from a base size of 220 pixels. On a wide screen, three or four cards share a line and stretch evenly. On a narrow screen, only one or two fit, and the rest wrap neatly underneath. The full explanation of these values is in the guide to the basic concepts of flexbox including flex-wrap on MDN, which is worth bookmarking.

Step-by-Step: Make Your Container Wrap

Follow these steps in order. Most layouts are fixed by the first two, and the remaining steps polish the result.

1. Add flex-wrap: wrap to the flex container and reload. If items now move to new lines, the default nowrap was your whole problem.
2. Check that you applied display: flex and flex-wrap to the actual parent of the items. Flex settings only affect direct children, so a wrapper element in between will silently break the layout.
3. Give each item a realistic base size with flex-basis, width, or the flex shorthand. Items with huge fixed widths can only fit one per line, which looks like broken wrapping.
4. Add a gap value on the container, such as gap: 16px, instead of margins on items, so spacing stays even across wrapped lines.
5. Set align-content if you need to control how the group of lines sits inside a tall container, for example align-content: flex-start to pack lines at the top.
6. Resize the browser slowly from wide to narrow and confirm that items move to new lines at sensible points without overlapping or overflowing.

Other Reasons Wrapping Looks Broken

Sometimes flex-wrap: wrap is already present, yet the layout still looks wrong. In that case, one of the following settings is usually fighting against the wrap.

Items Are Shrinking Instead of Wrapping

Wrapping only happens when an item cannot fit. If items are very flexible and allowed to shrink to almost nothing, the browser may prefer to squeeze them all onto one line at tiny sizes rather than wrap. This happens when items have a small or zero flex-basis and content that can compress, such as images. Give items a meaningful base size, for example flex: 0 1 240px, so the browser wraps once items would need to go below that starting width. Setting the first value, flex-grow, and the second, flex-shrink, thoughtfully makes the decision point predictable.

Items Are Too Wide to Wrap Sensibly

The opposite problem also appears. If each item has a fixed width of 500 pixels inside a 700 pixel container, you will get one item per line with large empty gaps, which can look like a failed grid. Use a smaller base size, allow items to grow with flex-grow: 1 so each line fills its space, or switch to percentage-based bases such as flex: 1 1 30% for a three-per-line pattern that adapts.

The Container Has No Room to Force a Wrap

If the container itself grows with its content, for example because it is inside another flex row or has width: max-content, it may simply become wide enough to hold everything, and the page overflows instead of the items wrapping. Give the container a definite constraint such as width: 100% or a max-width, so there is a real edge that triggers wrapping. This pairs with the general advice in the flexbox lessons covering wrapping and alignment on web.dev.

You Expected Columns but Set a Row

Wrapping follows the main axis. With flex-direction: column, items stack vertically and wrap into new columns, but only if the container has a fixed height to wrap against. Without a set height, a column container just grows taller and never wraps. If you wanted rows that wrap downward, keep the default row direction and use flex-wrap: wrap.

wrap-reverse Surprises

The value flex-wrap: wrap-reverse exists, but it reverses the order in which lines stack. New lines appear above earlier ones in a row layout, which can look like the layout is upside down. Unless you specifically need that effect, use plain wrap.

Controlling How Wrapped Lines Look

Once wrapping works, small refinements turn a functional layout into a polished one. Use justify-content to decide how items spread on each line: flex-start packs them to the left, center centres each line, and space-between spreads them to the edges. Be aware that with space-between, a final line with only one or two items will spread them far apart. Many designers prefer flex-start with a consistent gap so the last line looks like the others, just shorter.

Decide how the last line should behave. flex-grow: 1 stretches its cards to full width, while flex-grow: 0 with a fixed basis keeps them the same width as the cards above. Choosing deliberately avoids a stretched, unfinished-looking final row. For more patterns, see our guide on the complete CSS flexbox layout guide for beginners.

Common Mistakes and Quick Tips

The most common mistake is putting flex-wrap on the items instead of the container. Wrapping is a container property, and adding it to children does nothing. The second mistake is expecting wrapping while a parent element constrains or expands the container in unexpected ways, so always check one level up when a fix seems to be ignored.

Another frequent error is mixing margins and gap without accounting for both, which makes lines break earlier than expected. Pick gap as your single spacing tool inside flex containers. Also remember that images inside flex items need max-width: 100%, or a wide image can hold its item open and distort the whole wrapping pattern.

A final tip: temporarily give the container and items different background colours. Seeing the actual boxes makes the cause obvious much faster than changing values blindly.

Conclusion

Flex containers do not wrap because flex-wrap defaults to nowrap. Adding flex-wrap: wrap to the container, giving items a realistic flex-basis, and making sure the container has a real width constraint solves the problem in nearly every case. Refine the result with gap, justify-content, and a deliberate choice about growing on the last line, and your rows of cards, tags, or buttons will adapt cleanly to any screen size.

Frequently Asked Questions

What is the difference between flex-wrap: wrap and nowrap?

nowrap is the default and forces all items onto one line, shrinking or overflowing them as needed. wrap allows the container to create additional lines so items keep a healthy size and the layout stays readable on narrow screens.

Why do my items wrap but leave a big gap on the last line?

This usually comes from justify-content: space-between or from items growing with flex-grow: 1. Use justify-content: flex-start with a fixed gap, or set flex-grow: 0 if you want last-line items to match the width of the items above them.

Can I control how many items appear per line?

Yes, indirectly. Set each item’s flex-basis as a percentage of the container. A basis near 50 percent gives roughly two per line, and near 33 percent gives roughly three per line, accounting for the gap you set.

Does flex-wrap work with flex-direction: column?

Yes, but items wrap into new columns only when the container has a constrained height. Without a set height, a column layout simply grows taller. For most wrapping card layouts, the row direction is the right choice.

Why is flex-wrap ignored even though I added it?

Check that the rule is on the element with display: flex, that no later or more specific rule overrides it, and that the items are direct children of that container. An extra wrapper element between the container and the items is a very common hidden cause.