左右にだけ影をつけたいときにoverflow-yにclipを指定したらいい感じになった

CSS で 水平方向にだけ影をつけたい ときに色々試していたときに、overflow-y に clip を指定したらいい感じになったので、調べたこと含め自分用のメモとして残しておこうと思います。そもそも overflow プロパティに clip という値があることを認識していなかったとこある。

要素の左右にだけ影を表示したいときに、以下のように外側を囲んでいる要素の overflow-y プロパティに hidden を指定して影だけ消せないかとやっていたのですが、これだとうまくいかず。（以下のコードでは Tailwind CSS のクラスを使用しています）

<!-- overflow-y: hidden; を指定した場合 -->
<div class="overflow-y-hidden">
  <div
    class="flex size-20 items-center justify-center bg-red-600 text-white"
    style="box-shadow: #333 0 0 16px"
  >
    <span>hidden</span>
  </div>
</div>

MDN でドキュメントを読んでいたときに overflow プロパティに clip という値があることを知り、使ってみると上下に表示された影が消えて左右の影だけが残りました。（以下のコードでは Tailwind CSS のクラスを使用しています）

<!-- overflow-y: clip; を指定した場合 -->
<div class="overflow-y-clip">
  <div
    class="flex size-20 items-center justify-center bg-green-600 text-white"
    style="box-shadow: #333 0 0 16px"
  >
    <span>clip</span>
  </div>
</div>

以下ドキュメントによると、overflow-x もしくは overflow-y の値が visible でも clip でもない場合、もう一方に指定された visible は auto に、clip は hidden として計算されるとのこと。

• overflow - CSS: カスケーディングスタイルシート | MDN

1 つ目のコードで overflow-y に hidden を指定したとき、これは visible でも clip でもないため overflow-x に指定されている初期値の visible は auto として計算されることになります。auto の場合、コンテナの外側にはみ出した影は表示されない（ブラウザによる？）ようなので、上下の影だけを消したいのに左右の影まで消えてしまう、という状態になっていたっぽい。

以下に実際にブラウザで表示を確認できるようコードを置いてありますので、必要があればご確認ください。

• overflow-clip-sample - StackBlitz

当たり前のように使っていた overflow プロパティですが、普通に知らない値があって驚き。知ってると思ってるものでも、ちゃんと情報をアップデートしていかないとダメですね…。