久しぶりに CSS でハマったのでメモしておく。

ハマった点

See the Pen Untitled by hoto (@hoto17296) on CodePen.

サイドバーは固定幅・メインコンテンツはブラウザ幅に合わせて可変というよくあるレイアウトを flexbox で組んで、メインコンテンツ内に Carousel のような横に長い要素を含むコンポーネントを配置した。

.outer に width: 100%; overflow: scroll; が指定してあるので、これによりブラウザ幅に合うように要素幅が調整され、横に長い .inner (黄色い領域) のみがスクロール可能になることを期待していた。

しかし実際にはメインコンテンツ自体が横に伸びてしまい、ページ全体で横スクロールが発生してしまった。

※ 今回は横方向の話をしているが、縦方向でも同じ問題が起きる

対処

メインコンテンツに overflow: auto; を指定したところ、意図した通りの挙動になった。

(追記) min-width: 0; でも同じ動きになる (理由は後述)

See the Pen Untitled by hoto (@hoto17296) on CodePen.

原因 (推測)

おそらく flexbox の flex アイテムは overflow プロパティの値によって下記のように振る舞うのだと思う。(詳細不明)

flex アイテムの `overflow` が `visible` (または指定なし) のとき

子要素が大きい場合、flex アイテムは flex コンテナのサイズに縛られず伸びる

flex アイテムの `overflow` が `auto` (または `hidden`) のとき

子要素が大きい場合、flex アイテムは flex コンテナのサイズを超えないように調整され、要素内でスクロール可能になる (auto の場合)

(追記)

flex コンテナに合わせて縮めてくれない理由は「デフォルトで min-width: auto になっていて、コンテンツ幅を自動計算してそれを min-width として扱うから」っぽい。そのため上記の overflow: auto; ではなく min-width: 0; を指定しても動く。

overflow: auto; を指定すると何故うまくいくのかは引き続き不明だが、min-width: 0; を指定する方法のほうが適切なのかもしれない。