【Vuetify】max-heightを指定してスクロールバーを表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでmax-heightを指定してスクロールバーを表示する方法をご紹介しています。

Vuetifyで要素のmax-heightを指定してスクロールバーでコンテンツを表示できるようにしたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

※検証環境ではVuetify.2.4.9を使用しています。

では、解説していきます。

本記事でやりたいこと

せっかくVuetifyを使っているので、新しくスタイルを定義するのではなく、あるものを使ってやりたいことを実現したいなーと思い、タイトルにもあるようにmax-heightを指定してoverflowの縦方向（Y軸）をautoにしてみます。

下記は完成版のデモです。リストが指定した高さに設定され、スクロールバーが表示されています。

See the Pen Show Scrollbar max-height｜Vuetify by ryohei (@intotheprogram) on CodePen.

デザイン性は皆無ですが……一応実現したいことはクリアできていますね！

Vuetifyにおけるmax-heightとoverflowの指定について

Vuetifyでは、max-widthとmax-heightは属性に数値を指定することで最大幅や最大高を設定することできます。img要素に指定するwidth属性やheight属性と似たようなイメージです。

overflowについてはヘルパークラスが用意されており、予め決められたクラスを指定することでスタイルを設定することができます。

デモではそれぞれ下記のように指定しています。

max-height・max-width

<v-app id="app">
    <v-list max-height="200" max-width="500">
        <v-list-item></v-list-item>
        ...
    </v-list>
</v-app>

overflow

<v-app id="app">
    <v-list class="overflow-y-auto">        
        <v-list-item></v-list-item>
    </v-list>
</v-app>

max-heightとmax-width

全体の中で本記事の内容に関連する部分だけを抜き出すと下記のようになります。

<v-app id="app">
    <v-list
        class="overflow-y-auto"
        max-height="200"
        max-width="500">
        <v-list-item></v-list-item>
    </v-list>
</v-app>

max-heightとmax-widthは属性名が直感的だし、overflowのヘルパークラスもCSSで書く場合とほとんど同じなのでわかりやすいです。

overflowのヘルパークラスについて

CSSファイル内で確認できた分を記載しています。一通り揃っているので、使いやすいですね！

クラス名	適用スタイル
overflow-auto	overflow: auto !important;
overflow-visible	overflow: visible !important;
overflow-hidden	overflow: hidden !important;
overflow-x-auto	overflow-x: auto !important;
overflow-y-hidden	overflow-x: hidden !important;
overflow-y-auto	overflow-y: auto !important;
overflow-y-hidden	overflow-y: hidden !important;