v-col、勝手にflex-grow: 1;があたる

課題

FontAwesomeで挿入したアイコンに、flex-grow: 1;が勝手にあたり、この余白をどうにか詰めて親要素v-rowを右寄せにしたい

構造

解決法

v-colにクラス名を付与し、flex-grow: 0;指定。v-rowへはd-flex justify-endを指定にて解決

・FontAwesomeのアイコン要素を囲っているv-colに「icon-box」クラスを付与
・CSSにて「flex-grow: 0;」を指定
・親要素のv-rowにd-flex justify-endを指定

<template>
  <v-app-bar class="header" dense>
    <v-container class="img-box">
      <v-img class="img" src="../assets/header-logo.png" alt="" />
    </v-container>
    <v-container class="link-container">
      <v-row class="d-flex justify-end">
        <router-link class="text-link" to="/" active-class="selected-link">
          <v-col class="text-box"> <v-text>All</v-text></v-col>
        </router-link>
        <router-link class="text-link" to="/" active-class="selected-link">
          <v-col class="text-box"> <v-text>Men</v-text></v-col>
        </router-link>
        <router-link class="text-link" to="/" active-class="selected-link">
          <v-col class="text-box"> <v-text>Women</v-text></v-col>
        </router-link>
        <v-col class="icon-box">
          <font-awesome-icon :icon="['fas', 'magnifying-glass']"
        /></v-col>
        <v-col class="icon-box">
          <font-awesome-icon :icon="['fas', 'user']"
        /></v-col>
        <v-col class="icon-box">
          <font-awesome-icon :icon="['fas', 'cart-shopping']"
        /></v-col>
      </v-row>
    </v-container>
  </v-app-bar>
</template>

<style scoped>
.img-box {
  margin: initial;
  width: 90px;
  height: 90px;
}
.img {
  height: 100%;
  width: 100%;
}
.text-link {
  font-family: "Noto Sans JP", sans-serif;
  text-decoration: none;
  color: #333;
}
.icon-box {
  flex-grow: 0; //追加
}
</style>

解決

Headerにアイコンを挿入した際も、自動でflex-grow: 1;があたっていたけどimg要素をv-colで囲むと自動で指定される仕様？