狭い画面で横スクロールが出るページ

320ピクセルではグリッドに280ピクセルしかありませんが、列は320ピクセルを譲らないため、どのカードも画面の右端から20ピクセルはみ出し、ページが横にスクロールします。

min(100%, 320px) は、グリッドが320ピクセルより広いときは320ピクセル、狭いときはグリッド自身の幅になります。広い画面では何も変わらず、列は320ピクセル以上を保って行を埋めます。320ピクセルでは1列が280ピクセルまで縮んで収まります。ウィンドウではなくグリッド自身の幅を基準にするため、サイドバーの横でも、ダイアログの中でも、狭い列の中でも保たれます。

どちらの方法でも、講座の一覧は320ピクセルに収まり、このページでは1.4.10を満たします。おすすめは min() で最小幅に上限を付ける方法です。1行を変えるだけで、広い画面のレイアウトはデザインのまま保たれ、グリッドが実際に使える幅を測るため、レイアウトのほかの部分を変えても崩れません。ブレークポイントの方法はよく知られた形で、モバイルファーストのスタイルシートがすでにあるなら使えます。ただしブレークポイントの値しだいで、グリッドを別のレイアウトに置くたびに確認し直す必要があります。

ほかの固定の幅も探す。 幅が固定されているのは、グリッドだけとは限りません。コンテナー、サイドバー、フォーム、ボタン、カードで、ピクセル指定の width と min-width を探します。100vw は縦のスクロールバーを含むため、ページより数ピクセル広くなります。width: 100% と max-width、または min(100%, …) を使います。

フレックスとグリッドの子要素。 フレックスの子要素の最小幅は、標準では中身の幅になります。そのため、長い単語や広い表が1つあるだけで、レイアウト全体が広がります。子要素に min-width: 0 を指定し、中身を折り返せるようにします。

長い単語。 メールアドレス、URL、注文番号、長い英単語は、標準では折り返しません。文字を入れる要素に overflow-wrap: anywhere を指定すると、ほかに収まる方法がないときだけ途中で折り返し、通常の文章は変わりません。

メディア。 画像、動画、iframe は、指定がなければ width 属性の幅を保ちます。max-width: 100% と height: auto を指定します。縦横の配置が必要な地図やグラフは、専用の枠の中でスクロールしてかまいません。

スクロールしてよいコンテンツ。 1.4.10の例外は、データテーブル、地図、図、動画、ゲーム、1行に並ぶ必要があるツールバー、改行で意味が変わるコードなどです。広い表は overflow-x: auto の要素で囲み、枠を見えるようにして、tabindex="0" と、役割と名前（キャプションを aria-labelledby で指す role="region"）を付け、キーボードでもスクロールできるようにします。ページのほかの部分は、やはりリフローする必要があります。

はみ出しを隠さない。 body やラッパーに overflow-x: hidden や clip を指定すると、スクロールバーは消えますが、問題は消えません。切れた部分に届かなくなり、それも1.4.10を満たしません（コンテンツが消える失敗例F102）。

viewport の指定。 <meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマートフォンはページを約980ピクセルの幅で配置して縮小します。この meta 要素に固定の width=1024 を指定しても同じで、どのスマートフォンでもリフローしなくなります。

縦書きと低い画面。 横長のタイムラインなど、もともと横にスクロールするコンテンツには、高さ256ピクセルで同じことが求められます。400%では、固定表示のヘッダーやフッターが低い画面の大半を覆うこともあります。フォーカスが隠れる問題のガイドも参照してください。