Authoring guidance

Ten paired rules for building reflow-safe pages in Flex

Do this and reflow works. Do this and it breaks.

Flex reflows correctly when content is built to grow. It produces two-axis scrolling when content is pinned. Every rule below is paired: the left column is the build that survives a 320 pixel screen, the right column is the build that fails there, and each pair maps to a test page so you can watch it happen.
The one-line version

Let boxes size themselves to their content, and let rows break onto new lines. Every failure below comes from overriding one of those two behaviours with a fixed number. Rules 03, 04 and 05 are tuned per breakpoint; the rest hold whether or not your experience uses breakpoints at all.
Group A

Structure
01

Layout mode
Do this

Build structure in stacked layout

Sections and groups set to stacked flow grow taller as the content inside them grows. The page height follows automatically.
Not this

Position page structure absolutely

Absolutely positioned children sit at fixed coordinates and add no height to their parent, so nothing above or below them reacts.
Why it fails · see RF-04

Pinned children do not move when the screen narrows. They print through one another and run past the screen edge, which loses content and forces sideways scrolling at the same time.
02

Widths
Do this

Give text fluid widths

Use fill inside a row, or a percentage, so the box narrows with the screen. Use padding for the inset rather than a smaller width.
Not this

Set a pixel width on text

This includes any group that holds text. A 600 pixel box cannot fit a 320 pixel screen, and picking a smaller pixel number only moves the problem.
Why it fails · see RF-02 and RF-06

Any box wider than the screen forces horizontal scrolling, and that fails the single-direction condition on its own, whether or not the text inside is readable.
03

Rows and wrapping
Do this

Leave rows wrapping

Then set a percentage minimum width per breakpoint to choose how many columns fit: roughly 30 percent for three across, 40 for two, 90 for one.
Not this

Turn wrapping off on a content row

Columns then stay on one line however narrow the screen gets. Reserve this for a single-line toolbar or a deliberate horizontal scroller.
Why it fails · see RF-03

A three-column row that cannot break pushes its third column past the screen edge. Wrapping alone is not a guarantee of stacking, which is what the minimum width is for.
Group B

Height and type
04

Heights
Do this

Leave heights content-sized

The box then grows when its text rewraps onto more lines. Add a minimum height if you need a floor, never a fixed one.
Not this

Pin a pixel height on text

That height was chosen while the text was wider and needed fewer lines. It is also worth checking any height a breakpoint inherited from desktop.
Why it fails · see RF-02

Narrower text always needs more lines. A fixed height cuts the extra lines off, and content a reader cannot get to is a loss of content, not a cosmetic issue.
05

Type scale
Do this

Scale the font, not the box

Set a smaller size per breakpoint on the text style itself, so every piece of text using that style scales together.
Not this

Shrink the box to shrink the text

Making the container smaller does not make the type smaller. The type stays where it was and the box simply covers less of it.
Why it fails · see RF-02 and RF-05

The reader sees a cut-off word rather than smaller type. It is the same defect as a fixed height, arrived at by a different route.
06

Long unbreakable strings
Do this

Check the longest single word fits

Look at URLs, filenames, reference codes and long compound words. If one is too wide, lower the mobile size or allow it to break.
Not this

Assume a large mobile heading fits

A thirteen-character word set at 64 pixels is roughly 450 pixels wide, which is wider than most phones and wider than a 320 pixel test.
Why it fails · see RF-02

A fluid container does not protect you here. One string that cannot break is enough to set the page width and push everything sideways.
Group C

Controls, media and exemptions
07

Buttons and controls
Do this

Let buttons size to their label

Content width plus padding, so the label always fits however the button is sized. Put the row of buttons in a wrapping row so they stack instead of running off the edge.
Not this

Fix a button width and centre the label

A label longer than the box gets sliced at both ends, and it often happens at desktop too, not only on a phone.
Why it fails · see RF-05

A clipped label is a loss of content, so a fixed-width button fails reflow on its own. Target size is a separate criterion: 2.5.8 Target Size (Minimum) asks for 24 by 24 pixels at AA, and the 44 by 44 figure people quote comes from 2.5.5 at AAA.
08

Images
Do this

Size images in percentages

A percentage width with the aspect ratio locked lets the image scale inside its parent and keep its shape. Full width works inside a card.
Not this

Give an image a pixel width

It holds that size whatever happens around it, so it overruns its own card first and then the screen. A pixel height does the same vertically.
Why it fails · see RF-06

An oversized image is the most common single cause of two-axis scrolling, and the easiest to miss, because it looks correct at the width you built it at.
09

Text over images
Do this

Give overlaid text its own room

Let the text sit beside the image in its own column, so the pair becomes a single stack as the space narrows.
Not this

Pin the text over the picture

Fixed coordinates over a hero image, usually in a box whose height was cut for the wide layout.
Why it fails · see RF-01

Narrower text needs more lines than the fixed box allows, so lines are clipped. What survives lands on the image subject rather than the quiet area it was placed over, and the contrast goes with it.
10

Exempt content
Do this

Contain the exempt element

Put a wide table, map or diagram in its own scrolling frame, and say beside it why it is exempt, so nobody reads it as a mistake.
Not this

Let the exempt element set the page width

Treating one exemption as cover for the whole page is the most common way a genuine exemption turns into a real failure.
Why it matters · see RF-07

The criterion exempts content that genuinely needs two dimensions: data tables, complex diagrams, maps and video. It exempts that content only, never the page around it.

How to test