CSSの横スクロール問題を勉強しなおす
hashrock概ねoverflow-x-hiddenとoverflow-x-scrollをどっかの親要素・子要素に設定して修正するんだけど、総当たりで修正するみたいなことが多いのでしっかり理解し直したい。
hashrockそもそも要素の幅はどうやって決まるのか。
これが仕様を表現した説明になっていて良い。
hashrockIntrinsic Size, Natural Size, Extrinsic Size, Rendered Sizeなど様々な用語が出てきて分かりづらい。
正確な用語は下記から参照できる。
例えば “intrinsic” dimensions は混同を避けるため “natural” dimensionsにリネームされたりしている。
hashrockw-full(width: 100%)に意味はあるのか。
tailwindで自動適用されるCSSリセットのpreflightでは全要素にborder-boxが適用される。
ボックス要素にデフォルトのwidth: autoがあたっている場合、width: 100%と似た挙動になる。下記の記事によると、paddingを含めるか含めないかという違いが出てくるが、border-boxの場合は同じになるはず。
hashrock
ここでnatural or intrisic sizeって言ってるけど混乱を生む書き方じゃないのかな。どちらかにしてほしい気が。
hashrock関係としては、intrinsic sizeはコンテンツから計算される値で、多くの場合natural dimensions（画像の解像度など）から算出される、とW3C仕様書には書いてある。
hashrockなんかややこしいんだけど、コンテナから決定される外部サイズと、アイテム側のmin-width / min-heightで折り合いがつかない場合にオーバーフローが発生すると理解した。
hashrockたとえばよく見るoverflowのパターンは下記のように作ることができる。
export default function Home() {
return (
<div class="max-w-4xl mx-auto my-16">
<div class="bg-gray-200 p-4">
<div class="flex gap-4">
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
<div class="bg-gray-400">testestestest</div>
</div>
<div>
Contents
</div>
</div>
</div>
);
}
これはflex設定したNavがwrapされておらず、min-widthが外部サイズを超過した例。
hashrockfirefoxでスクロールバーが発生する状況（この場合ブラウザ幅を小さくしてコンテンツがはみ出る状態にする）と、どの要素が原因でoverflowが起きているか表示することができる。
hashrockなので直接的な修正手段としては、オーバーフローが発生したアイテムのコンテナでoverflow-x-autoを設定する、となる。
hashrockもっと上のコンテナにoverflow-x-autoを持っていってもよい。どの単位でスクロールさせたいかによる
hashrockこうしてみると簡単なはずなのだけれど、実際にはコンテナ側もコンテンツに応じて伸びてしまって、overflow-x-autoを設定しても有効にならないことが多い気がする（その上のコンテナでoverflow-hiddenを設定して解決することが多い）。うまくその状況を作れないな。実例をもう少し調べたい
hashrockどうも display: table が絡んでいるっぽい。table要素がスクロールさせたい子要素に入っている場合、overflow-autoでスクローラブルにできない。
なんだこれ…？外側からみてblockじゃないのか？