【デバッグログ】overflow:hiddenが効かない？なぜ？

こんにちは。フロントエンド志望のRioです。
今回もよくある「○○が効かない。なぜ？」をやっていこうと思います。

私が自分のポートフォリオサイトを制作している時に遭遇したバグです。

今回は overflow:hiddenです。
overflowとは、親要素に指定する、子要素が親要素から溢れそうなときにどう処理をするかのプロパティです。
overflow:hiddenとはoverflow:visibleが溢れた子要素を全部見せるのに対して、隠すという対応をとるコマンドです。

overflow:visible

overflow:hidden

(MDNより引用）

このoverflow:hiddenが効かない？なぜ？ということです。

一つ考えられる原因とすれば
「自分も含め祖先の要素がだれもpx等の固定されたhightおよびwidthを持っていない」
つまりそれらがpxではなく、%やvh,vwで指定されたwidthしか持っていないということです。

私のポートフォリオの例で言いますと、

こちらの要素（サムネイル）x軸にはちゃんと隠れているのですが、
y軸に関しては溢れてしまっています。

CSS

.playback {
  opacity: 0;
  transition: opacity 0.25s ease 0.7s;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 7;
  width: 100%;
  overflow: hidden;
  /* height: 47%; */
  aspect-ratio: 3 / 2;
}

.playback video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 1%;
}

.playbackは<video>を収めるためのコンテナです。
その子要素である<video>はそのコンテナよりも大きく設定してあります。
なのでoverflow:hiddenをしないと溢れてしまいます。

なぜx軸には効くのにy軸には効かない？

それはWebサイトの性質にさかのぼると思います。
Webサイト全体の横幅は通常、固定値で指定されています。
ですが縦軸に関しては、div要素などは中に入っている文章の文字数に沿って下方向へと大きく成長していきます。
文章が長ければ長いほどコンテンツは下に伸びていきます。そのため固定したheightは多いケースでは指定しないのです。heightを固定してしまうとそれ以上コンテンツが下に成長しなくなってしまいますからね。

なので結果的に祖先に誰もheightの固定値を持っていないので、
overflow:hidenが　y軸に関しては効かなくなってしまうのです。
overflow:hiddenが正しく動作するにはその要素自身、またはその要素の祖先（body,htmlまでのぼる）いずれかの誰かが固定された(px指定された)heightおよびwidthを持ってなければいけません。widthに関してはこれはクリアされていましたがheightに関してはクリアされていませんでした。
そして下方向へと成長するWebサイトの性質上固定値のheightを指定するのも難しい。

ではどのようにしてこのサムネイルを枠の中に収めればいいのか？

自分が使った方法はaspect-ratioを指定することでした。
これを利用することでたとえheightの固定値を持ってなかったとしても、すでにあるwidthの固定値をもとにheightが計算されることでy軸のoverflow:hiddenが動作するようになります。

CSS

.playback {
  opacity: 0;
  transition: opacity 0.25s ease 0.7s;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 7;
  width: 100%;
  overflow: hidden;
  /* height: 47%; */
  aspect-ratio: 3 / 2;   /*👈これ！*/
}

みなさんも私のようにoverflow:hiddenがなぜかy軸だけ効かない！となった場合にはこの
aspect-ratioを是非、試してみてください。

誰かの参考になればと思います。

ご拝読ありがとうございました。