縮まないと、あふれる
min-width:0 と overflow の関係

overflow は、何を前提にしているか

overflow-x:auto は「はみ出したらスクロールさせる」指定です。 ここで見落としやすいのが、「はみ出す」には要素の幅が先に決まっている必要があることです。

つまり overflow を効かせるには、その要素が 中身より小さくなれることが前提になります。これを本記事では「縮む余地」と呼びます。

縮む余地が無くなる原因は、大きく2つでした。 ① 要素自身が中身に合わせて広がる、 ② 中身が箱の幅に合わせてしまい、差が生まれない。 順に見ていきます。

ブロック要素は、そもそも広がらない

まず安心できる話から。通常のブロック要素は width:auto が既定で、 これは親の内容幅に一致します。中身がどれだけ長くても、箱は広がりません。

.box {
  overflow-x: auto;   /* 親幅に収まり、中身がはみ出せばスクロール */
}

ですから「ブロック要素に overflow-x:auto を書いたのに効かない」なら、 原因は別のところにあります。§3以降のどれかです。

フレックスの子は、縮まない

ここが本題です。フレックスアイテムの min-width は既定が auto で、 これは「中身の最小幅より小さくならない」という意味になります。

.bar { display: flex; }

.bar .path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* ↑ 3点セットを書いても、省略されない */
}

white-space:nowrap があるので中身の最小幅は一行ぶんの実寸です。 min-width:auto がそれを下限にするため、 箱は縮めず、中身と同じ幅になります。差がゼロなので省略記号も出ません。

.bar .path {
  min-width: 0;        /* 縮む余地をつくる */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

overflow-y だけ書くと、横も auto になる

縦だけスクロールさせたい箱を作ったつもりが、横にもスクロールできる状態になっていました。

.list {
  max-height: 230px;
  overflow-y: auto;
  /* overflow-x は書いていない → visible のつもり */
}

理由は単純で、片方だけを見えるままにする描画ができないからです。 縦にクリップしながら横だけ枠外へ描く、ということが成立しません。 そこで visible は auto へ倒されます。

.list {
  max-height: 230px;
  overflow-y: auto;
  overflow-x: clip;   /* 横は塞ぐ、と書く */
}

width:max-content が要る場合と、無駄な場合

箱に縮む余地があっても、まだスクロールしないことがあります。 今度は中身の側に理由があります。

中身がブロック要素だと、差が生まれない

.wrap { overflow-x: auto; }

.wrap .line {
  /* div などのブロック要素 */
  white-space: pre;   /* 折り返さない */
}

.line はブロックなので width:auto = 親幅です。 中身のテキストは枠外へ描かれますが、要素自体の幅は親と同じ。 箱と中身の差がゼロなので、スクロール領域が生まれません。

.wrap .line {
  width: max-content;   /* 中身の実寸まで広がる */
  min-width: 100%;       /* 短い行でも枠いっぱい */
  white-space: pre;
}

ところが、書いても無駄な場合がある

.wrap pre {
  overflow-x: auto;
  width: max-content;   /* max-width に負けて無効 */
  max-width: 100%;
}

5つのパターンを、並べて見る

画面幅360px、中身の実寸900pxという条件で、箱と中身がどう振る舞うかを比べます。

2番目だけ、箱そのものが画面をはみ出しています。 フレックスアイテムが縮めないため、ページ全体の幅を押し広げる—— これが最も見つけにくいパターンでした。

まとめの早見表