Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった

状況#

簡易的な例を挙げると、次のような状況になっていた。

1
<style>
2
  h1 {
3
    font-family: "Noto Sans JP, sans-serif";
4
    font-size: 24px;
5
    line-height: 1.2;
6
  }
7
  .overflow-ellipsis {
8
    white-space: nowrap;
9
    overflow-y: hidden;
10
    text-overflow: ellipsis;
11
  }
12
</style>
13
<h1>とても長いタイトル</h1>

原因#

まず、overflow-xとoverflow-yは副作用があるプロパティである。どちらのプロパティも初期値はvisibleであるが、どちらか一方を指定すると、もう一方は暗黙的にautoとして扱われる。

つまり、overflow-y: hiddenを指定した場合、overflow-xはautoとして扱われる。そのため、コンテンツがコンテナからはみ出ていれば縦スクロールバーが表示されるようになる。

次に、フォントにはフォント自体に高さがあり、line-heightがこれを下回ると、コンテナをコンテンツが超えた判定を受ける。日本語フォントの場合、最低でも 1.4 は必要なことが多い。

この 2 つの要因が重なったことで、縦スクロールバーが表示されるようになっていた。

対処法#

overflow-y: hiddenをoverflow: hiddenに変更することで、overflow-xもhiddenとして扱われるようになる。これにより、縦スクロールバーが表示されなくなる。

一方、overflow-x: visibleにすることは無意味である。なぜなら暗黙的にautoになるわけではなく、visibleが暗黙的にautoのように振る舞うためである。