小屏幕下如何配置Vuetify v-card与v-tile尺寸避免内容溢出

这套布局在xs屏出现溢出、错乱的核心原因有三点：

• 外层栅格配置不合理：xs6 offset-xs3的设置让超小屏下卡片实际可用宽度不足屏幕的一半，内部固定尺寸的头像、图标没有足够的排布空间
• 弹性盒模型缺少收缩约束：列表项作为弹性容器，内部内容块没有设置最小宽度限制，长文本、固定尺寸元素会默认撑开容器，打破原有栅格计算
• 卡片缺少溢出边界防护：没有给卡片根节点加溢出裁剪规则，超出范围的内容会直接漏出卡片边界

全程不需要写自定义CSS，直接用组件自带的栅格、弹性、尺寸类就能解决：

• 调整响应式栅格规则
  把外层v-flex的类从xs6 sm6 offset-sm3 offset-xs3替换为xs12 offset-0 sm8 offset-sm2 md6 offset-md3：超小屏下卡片占满全宽无偏移，中小屏再逐步收窄到设计稿要求的宽度，从根源上解决容器宽度不足的问题
• 加卡片溢出防护
  在v-card根节点追加overflow-hidden内置类，所有超出卡片边界的内容自动被裁切，不会出现溢出卡片的视觉问题
• 给弹性内容块加收缩约束
  所有嵌套在v-list-tile里的v-list-tile-content组件，统一加min-width-0类——弹性盒模型默认子元素min-width: auto，不会主动收缩适配，加这个类后配合已有的text-truncate类，长文本会正常截断，不会撑破容器
• 去掉冗余的布局嵌套
  删掉v-list-tile内部多余包裹的v-layout容器（包括放菜单图标的容器、放BUY按钮的容器），直接把图标、按钮平铺在弹性列表项的同级位置，减少不必要的布局层叠带来的计算偏差
• 固定尺寸元素做响应式适配
  把v-list-tile-avatar写死的size="60"属性删掉，替换为内置响应式尺寸类xs:size-12 sm:size-16，超小屏下自动缩小头像尺寸，避免挤压其他内容的排布空间

<v-layout row wrap>
  <v-flex
    xs12
    offset-0
    sm8
    offset-sm2
    md6
    offset-md3
  >
    <v-card class="mx-auto overflow-hidden">
      <v-card-title class="mx-0 px-2 pa-1">
        <v-list-tile class="grow ma-0 pa-0" avatar>
          <v-list-tile-avatar class="mr-2">
            <img :src="item.avatar">
          </v-list-tile-avatar>
          <v-list-tile-content class="ml-2 min-width-0">
            <v-list-tile-title
              v-html="item.pageName"
              class="text-truncate"
            />
          </v-list-tile-content>
          <v-icon class="ml-2">more_horiz</v-icon>
        </v-list-tile>
      </v-card-title>

      <v-card-text class="pa-0">
        <v-layout row wrap class="pa-0">
          <v-flex xs12 class="pa-2 body-1">
            {{ item.postText }}
          </v-flex>
          <v-flex xs12>
            <v-img :src="item.avatar" />
          </v-flex>
        </v-layout>
      </v-card-text>

      <v-card-actions class="red lighten-1">
        <v-list-tile class="grow ma-0">
          <v-list-tile-content class="min-width-0">
            <v-list-tile-title class="text-truncate font-weight-bold">
              {{ item.title }}
            </v-list-tile-title>
            <v-list-tile-sub-title class="text-truncate">
              {{ item.subtitle }}
            </v-list-tile-sub-title>
          </v-list-tile-content>
          <v-btn flat outline>BUY</v-btn>
        </v-list-tile>
      </v-card-actions>
    </v-card>
  </v-flex>
</v-layout>

内容的提问来源于stack exchange，提问作者A.D