CSSのoverflowのこの仕様は本当に変更してほしい


ども、レーウィンです。こまごまと記事あげてみる。
今回は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などで埋めればスクロールバーは消えるけど、だいぶ解せない。どうにかしてくれー!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。