flexアイテムが縮まない・ellipsisが効かない原因はmin-width:auto
flex/gridアイテムの初期値min-width:autoが「中身より小さくならない」下限を作るため、flex-shrinkが効かずellipsisも無視されます。入れ子のどの段にmin-width:0を入れるか、Gridの1fr対策、犯人の段を一発特定するスニペットまで。
レスポンシブ
レスポンシブ対応で崩れる原因と直し方をまとめたタグです。ブレイクポイントの決め方、スマホ実機だけメディアクエリが効かないケース、右側に出る謎の余白などを扱っています。
スマホで横スクロールが出る原因の特定手順と直し方｜overflow-x:hiddenで隠す前にやること
「PCでは問題ないのに、スマホだと画面が少し横に動く」「右にスワイプすると白い余白が出る」——レスポンシブ実装で最後まで残りがちな不具合です […]
スマホでタップ後に:hoverが残る問題の直し方｜@media (hover: hover)とタップ挙動の実務対応
PCで作ったボタンやカードをスマホ実機で確認すると、タップしたあとhoverの見た目（色が変わる・浮き上がる・画像が拡大する）がそのまま残り […]
100vhがスマホでずれる原因と、dvh/svh/lvhの正しい使い分け【CSS実例】
スマホで確認したらファーストビューの下にあるボタンが画面外に隠れている、スクロールしていないのに縦スクロールバーが出る——height: 1 […]