[Rails] モバイル表示時のコード要素のテキストオーバーフロー問題を修正

Context

Railsガイドのインタースティシャルノート（補足説明ブロック）において、bin/rails generate model Book title:string author:string のような長いコマンド文字列を含む <code> 要素が、モバイル端末で表示した際にコンテナからはみ出し、横スクロールやテキストの切り取りが発生していました。この問題は、特にRails Guidesの active_record_basics.html などのページで顕著に現れていました。

Technical Detail

問題の原因

.interstitial コンテナは display: flex を使用していましたが、内部の <p> 要素が min-width: auto（デフォルト値）を持っていたため、コンテンツサイズ以下に縮小できませんでした。これにより、長いコードスニペットがモバイルデバイスでコンテナをオーバーフローさせていました。

Flexboxの仕様では、flex itemの min-width のデフォルト値は auto であり、これはコンテンツの幅を基準とします。長い <code> 要素を含む場合、この最小幅がコンテナ幅を超えてしまうことが問題でした。

解決方法

修正では、段落要素に overflow: hidden を追加することで問題を解決しています：

p {
  margin-bottom: 0.75em;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
  }
}

overflow: hidden を設定することで、Block Formatting Context（BFC）が確立されます。これにより、flexbox内での min-width: auto の計算方法が変更され、段落要素が適切に縮小可能になります。

技術的背景

CSS仕様において、overflow の値が visible 以外（この場合は hidden）に設定されると、新しいBlock Formatting Contextが作成されます。BFCが確立されると、flex itemの自動最小サイズの計算アルゴリズムが変更され、コンテンツサイズではなくコンテナサイズに基づいて計算されるようになります。

これにより、以下の効果が得られます：

段落要素がコンテナ幅に収まるように縮小可能になる
内部の <code> 要素が適切に折り返される
モバイルビューでの水平スクロールが不要になる

影響範囲

この変更は、Rails Guidesの全てのインタースティシャルノート（補足説明ボックス）に適用されます。特に長いコマンドラインやコードスニペットを含むノートで、モバイル表示時の可読性が向上します。