如何设置组件最大高度以上方组件底部为边界？

1. 约束卡片高度，避免溢出地图 #

给地图和卡片添加相对定位的父容器，确保卡片的绝对定位基于容器，再通过固定卡片顶部位置，把它限制在地图下方区域：

<div style="position: relative;">
  <!-- Google Map -->
  <GoogleMap api-key="" style="width: 100%; height: 500px" :center="{ lat: 40.689247, lng: -74.044502 }" :zoom="3" id="google-map">
  </GoogleMap>

  <!-- Marker details card -->
  <v-card class="d-flex flex-column flex-wrap h-auto w-auto"
    style="position: absolute; top: 500px; right: 0; bottom: 0; z-index: 1000; overflow-y: auto; max-width: 400px;">
    <!-- close button at top right -->
    <v-btn icon @click="renderMarker = false" style="position: absolute; top: 0; right: 0; z-index: 1; width: 50px; height: 50px;">
      <v-icon>mdi-close</v-icon>
    </v-btn>
    <!-- 剩余卡片内容 -->
  </v-card>
</div>

• 父容器设为position: relative：让卡片的绝对定位参考容器，而非整个页面
• top: 500px：和地图高度一致，卡片顶部刚好对齐地图底部，完全不会溢出到地图区域
• bottom: 0：卡片底部贴住容器底部，高度自动填充地图下方的区域
• overflow-y: auto：当卡片内容超出允许高度时，自动显示垂直滚动条，保证布局不混乱
• max-width: 400px：可选，限制卡片最大宽度，避免大屏上布局过宽

2. 实现流式布局（第二行从第一行结束位置开始） #

把卡片内部的固定列布局改为flex流式布局，去掉v-row的固定cols设置，用flex-wrap: wrap让元素自动换行：

修改副标题区域：

<template v-slot:subtitle>
  <div class="d-flex flex-wrap gap-3">
    <div>
      <v-icon class="me-1 pb-1" color="error" size="18"></v-icon>
      0.0
    </div>
    <div>
      <v-icon class="me-1 pb-1" color="error" icon="mdi-calendar-range" size="18"></v-icon>
      0.0
    </div>
  </div>
</template>

修改数值与图标区域：

<v-card-text class="py-0 d-flex flex-wrap align-items-center gap-4">
  <div class="text-h2" style="min-width: 120px;">
    0.0
  </div>
  <div class="text-right" style="min-width: 120px;">
    <v-icon color="error" icon="mdi-waveform" size="88"></v-icon>
  </div>
</v-card-text>

• flex-wrap: wrap：子元素空间不足时自动换行，第二行从第一行结束位置开始
• gap-3/gap-4：设置元素间距，提升布局美观度
• min-width：保证每个元素有最小宽度，避免小屏上布局拥挤

完整修改后代码 #

<div style="position: relative;">
  <!-- Google Map -->
  <GoogleMap api-key="" style="width: 100%; height: 500px" :center="{ lat: 40.689247, lng: -74.044502 }" :zoom="3" id="google-map">
  </GoogleMap>

  <!-- Marker details card -->
  <v-card class="d-flex flex-column flex-wrap h-auto w-auto"
    style="position: absolute; top: 500px; right: 0; bottom: 0; z-index: 1000; overflow-y: auto; max-width: 400px;">
    <!-- close button at top right -->
    <v-btn icon @click="renderMarker = false" style="position: absolute; top: 0; right: 0; z-index: 1; width: 50px; height: 50px;">
      <v-icon>mdi-close</v-icon>
    </v-btn>
    <v-card-item :title="MRE">
      <template v-slot:subtitle>
        <div class="d-flex flex-wrap gap-3">
          <div>
            <v-icon class="me-1 pb-1" color="error" size="18"></v-icon>
            0.0
          </div>
          <div>
            <v-icon class="me-1 pb-1" color="error" icon="mdi-calendar-range" size="18"></v-icon>
            0.0
          </div>
        </div>
      </template>
    </v-card-item>

    <v-card-text class="py-0 d-flex flex-wrap align-items-center gap-4">
      <div class="text-h2" style="min-width: 120px;">
        0.0
      </div>

      <div class="text-right" style="min-width: 120px;">
        <v-icon color="error" icon="mdi-waveform" size="88"></v-icon>
      </div>
    </v-card-text>

    <div class="d-flex py-3 justify-space-between">
      <v-list-item density="compact" prepend-icon="mdi-map-marker-radius">
        <v-list-item-subtitle>
          Latitude: 0.0
          Longitude: 0.0
        </v-list-item-subtitle>
      </v-list-item>
    </div>
  </v-card>
</div>

内容的提问来源于stack exchange，提问作者canersevdiceginibekleyenoglu