Reflow

Content wrapping and rearranging as space changes, so it stays readable without being clipped or making the whole page scroll sideways.

stuff rearranges when the screen gets smallermake the page fit without cutting anything offcards drop onto the next lineno sideways scrolling when zoomedlayout wraps on a narrow screenrefownothing gets cut off when I zoom inmobile layout rearranging itselfwhy do I have to scroll sideways on my phone

See it

Live demo coming soon

What it is

Reflow is what happens when content changes arrangement to fit the space available. Columns stack, navigation wraps or changes form, and cards move to new rows instead of being clipped or forcing the whole page sideways.

Design for it whenever a layout must survive narrow screens, split windows, or enlarged text. WCAG success criterion 1.4.10, added in 2.1 and kept in 2.2, uses a width equivalent to 320 CSS pixels as the key test for most vertically scrolling content.

Gotcha: shrinking everything is not reflow. Text still needs a readable size, controls still need room, and the source order must make sense after columns stack. Fixed widths and absolutely positioned copy are the usual troublemakers. Different sense, same word: browser engines also call layout recalculation a reflow, which is the performance problem behind layout thrashing, not this.

Ask AI for it

Make this interface reflow at narrow widths and 400% browser zoom: use CSS Grid with repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), add flex-wrap to action rows, replace fixed widths with max-width, and stack the main and aside regions in DOM order. Verify it works at 320 CSS pixels wide with no page-level horizontal scrolling or lost controls.

You might have meant

responsive layoutbreakpointmobile first layoutresize text and reflowlayout thrashing

Go deeper