【CSS,Vue】親のサイズに合わせて、フォントサイズを変更する

Question

環境

vue
vuetify

動かす端末
iPad(第8世代)

前提・実現したいこと

表題の通り、親のサイズに合わせて、フォントサイズを変更したいと思っています。
画像を見ていただいたほうが早いと思います。

２行目にまたがる文字数は多くてせいぜい５文字ほどだと思うので、フォントサイズを小さくすると行った方法で解決したいと考えております。

また、CodePenで実装したものが下記となります。
https://codepen.io/momochi/pen/QWEzYOo

実現方法や私の試したことのエラーの原因をご教授頂きたいです。
よろしくお願いします。

該当のソースコード

<div id="app">
  <v-app>
    <v-container fluid>
      <v-item-group
        v-model="selected"
      >
        <v-row style="width: 50%">
          <v-col v-for="q in qlist" :key="q" cols="4">
            <v-item v-slot:default="{ active, toggle }" :value="q">
              <v-card
                :color="active ? 'green' : 'white'"
                :class="{
                  'white--text': active,
                  'black--text': !active,
                }"
                height="50"
                class="d-flex align-center"
                @click="toggle"
                elevation="2"
              >
                <div v-if="active">
                  <v-icon dark right>mdi-checkbox-marked</v-icon>
                  {{ q }}
                </div>
                <div v-if="!active">
                  <v-icon color="black" dark right
                    >mdi-checkbox-blank-outline</v-icon
                  >
                  {{ q }}
                </div>
              </v-card>
            </v-item>
          </v-col>
        </v-row>
      </v-item-group>
      <p>{{selected}}</p>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      qlist:["ああああああああああああああああああああああああああ","bb","cc","dd"],
      selected:""
    }
  },
  methods:{
    
  }
})

試したこと

親要素の幅を取得できれば、フォントサイズを計算できると考え、下記のURLのように試してみたのですが、
エラーで取得ができませんでした。
https://qiita.com/qualidea/items/9dd11487292ed387e5e1

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'clientWidth' of undefined"

TypeError: Cannot read property 'clientWidth' of undefined

Answer 1

フォントサイズを小さくするのも限界がありフォントによって幅が違うので
その方法はあまりよろしくないです。
オーバーフローの処理は、隠すか、スクロールするか、つきぬけるかのどれかが妥当

Comments

[momochi]

使用する環境はiPadで決まっており、WEBアプリとして利用する予定です。

また、フォントサイズはそこまで小さくすることはないと思います。
二行目にまたがる文字数は多くて５文字程度までだと予想するからです。

ご提案いただいた、隠す、スクロール、つきぬけるはデザイン的によろしくないかと思いますので、
申し訳ございませんが、他の方法はございませんでしょうか。

[miyabi_pudding]

> 使用する環境はiPadで決まっており

そのような前提条件などは、記載いただかないと、
第三者は知りようがありません。
質問本文に記載ください。

Answer 2

Vue.js については分からないので、
HTML CSS の観点から回答します。

単位をvwにすると画面幅に対しての相対値で設定できます。
あとはcalcと組み合わせて、画面幅100vw に対して余白等を引いて、1行の最大文字数で割れば font-size を計算できると思います。