Basic Englishクイズ結果画面のスクロール不具合 & Miller Columnレスポンシブ修正

2026-02-13 の開発作業で対応したCSS周りのバグ修正3件をまとめる。

1. Basic Englishクイズ: 結果画面がスクロールできない

症状

クイズを全問回答し終えると QuizResultSummary が表示されるが、内容が画面に収まりきらないときスクロールできず、下部が見切れる。

原因

QuizContainer.vue の .quiz-container に以下が設定されていた。

.quiz-container {
  height: 100dvh;
  overflow: hidden;
}

問題回答中は .questions-scroll に flex: 1; overflow-y: auto; があるため問題なくスクロールできていたが、結果画面の QuizResultSummary を囲むラッパーにはスクロール用のスタイルがなかった。

修正

結果表示を囲む div に .result-scroll クラスを追加し、問題スクロール領域と同じ flex: 1; overflow-y: auto; min-height: 0; を適用した。

.result-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

overflow: hidden は親コンテナに残したまま、子要素側でスクロールを制御する構成にしている。

2. Miller Columnレイアウト: デスクトップとモバイルが同時表示される

症状

理科ページ (/science/[major]/[topic]) で、モバイル幅にしてもデスクトップ用の Miller Columns が消えず、モバイル用のコンテンツ領域と両方が表示される。

原因

CSSの詳細度の問題。.mobile-detail に display: flex を直接書いていたため、メディアクエリ内の .mobile-only { display: none } が上書きされていた。

/* デスクトップ時に効くはずが… */
.mobile-only {
  display: none;
}

/* こちらが常に勝ってしまう */
.mobile-detail {
  display: flex;  /* .mobile-only の display: none を上書き */
}

.mobile-detail は .mobile-only クラスも持っている要素だが、同じ詳細度でも後に書かれた .mobile-detail の宣言が勝ってしまう。

修正

.mobile-detail からは display: flex を削除し、レイアウト方向のみ指定する形に変更。表示/非表示の切り替えは .mobile-only / .desktop-only クラスに任せる。メディアクエリ内で .mobile-detail { display: flex; } を宣言して、モバイル時だけ flex レイアウトが有効になるようにした。

/* ベース: 方向だけ指定 */
.mobile-detail {
  flex-direction: column;
}

/* モバイル時のみ flex を有効化 */
@media (max-width: 768px) {
  .mobile-detail {
    display: flex;
  }
}

overflow: hidden の親コンテナでは、スクロールさせたい子要素に flex: 1; overflow-y: auto; を忘れずに設定する
CSS の表示切り替え（display: none / display: flex）は詳細度と宣言順序に注意する。レスポンシブ切り替え用のユーティリティクラスと、レイアウト定義クラスを分けて管理するのが安全
Grid/Flexbox の子要素には min-width: 0 を付けておくとテキスト溢れを防げる

Basic Englishクイズ結果画面のスクロール不具合 & Miller Columnレスポンシブ修正

1. Basic Englishクイズ: 結果画面がスクロールできない

症状

原因

修正

2. Miller Columnレイアウト: デスクトップとモバイルが同時表示される

症状

原因

修正

3. Miller Column: テキストが溢れる

症状

修正

4. /convert-science-content スラッシュコマンドの整備

まとめ