ども、レーウィンです。こまごまと記事あげてみる。
今回はoverflowの仕様について
CSSにoverflowというプロパティがある。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
ブロックからはみ出した要素の処理をどうするか。
positionプロパティが必須となっていて、
はみ出した分を非表示にするならhidden、表示するならvisible、スクロールバーで見せるならscroll、ブラウザに「いい感じでよろしく」とするならauto。デフォルトではauto。
x軸だけ、y軸だけも選択できる。
overflow-x、overflow-y。これで、横だけ非表示、縦だけ表示とかできるわけなんだけど、、、
ここで1つ何故、と思う仕様がある。
それは、overflow-xもしくはoverflow-yをhiddenにした時、設定しなかった方の軸にはvisibleを適用できず、仮にvisibleを設定してもauto扱いにされるという問題。
つまり
、 .inner { position: relative; overflow-x: hidden; overflow-y: visible; }
と書いても、visibleは適用されず、
、 .inner { position: relative; overflow-x: hidden; overflow-y: auto; }
として扱われてしまう。ほんと、何故。
このページでも同じこと書いてあるから参考までに
https://www.brunildo.org/test/Overflowxy2.html
しかもこれ、バグじゃないんですよ。
https://www.w3.org/TR/css3-box/#overflow-x
W3Cのoverflowの説明に
「overflowの片方がhiddenならもう片方のvisibleはautoとして解釈するで^^」
って書いてあるんですよ。いやそれ望んでないんですけど???
一応、はみ出した分をpaddingなどで埋めればスクロールバーは消えるけど、だいぶ解せない。どうにかしてくれー!