@Mariko29posted at 2022-09-29

css overflow-y: hidden;がX軸にも効いてしまう

Q&A

Closed

CSS CSS3 overflow

解決したいこと

CSS overflow-y: hidden;がX軸にも効いている原因を知りたいです。
.wrapperクラスにoverflow-yを指定しています。

発生している問題・エラー

初期状態(overflow-y: visible;)

問題の状態(overflow-y: hidden;)

該当するソースコード

 <div class="wrapper">
   wrapper
 </div>

.wrapper {
  position: relative;
  width: 1000px;
  height: 350px; 
  margin: 80px auto;
  border: 1px solid #333;
  overflow-y: hidden;
}

.wrapper::before {
  content: "wrapper擬似要素";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 680px;
  height: 330px;
  background-color: rgba(235, 240, 245, 0.8);
}

自分で試したこと

・overflow-y: hidden;とoverflow-x: visible; を指定し分けたが上記と同現象になった。
　（同時にそれぞれ指定することは仕様上できないらしい？）
・overflow-y: clip;を指定すると解決したが、hiddenだとxにまで効く理由は未だわからず。

CODE PEN
https://codepen.io/thisisapen/pen/RwyQeqK

分かる方、どうぞよろしくお願いいたします。

1Answer

@takaram posted at 2022-09-29

overflow-xのMDNによると、

overflow-y が hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。

とあります。つまり、overflow-x: visible; overflow-y: hidden;と設定すると、overflow-x: auto;として解釈される、というのがCSSの仕様のようです。
（なぜそんな仕様なのかまではわかりませんでしたが……）

5Like

Comments

@Mariko29
Questioner
お返事が遅れました、ご回答ありがとうございます！
overflow-y: hidden;につられてoverflow-xもhiddenになっているということでしょうか？

同じような記事を見て、overflow-x: visible;を記載しなければ問題ないかと思っておりました、、

Are you sure you want to delete the question?