這是Vuetify 3。我沒有使用任何定制的CSS，只是Vuetify布局類。我正在創建一個MonthPicker組件。

以下是最終輸出:

這是一個簡單的v菜單，里面有一個v卡。卡片有兩欄，用于月份和年份選擇。左欄進一步分為12個月的4x3布局(但這與手頭的問題無關)。

規則如下:

除了月份按鈕，我不想指定任何元素的高度。按鈕應該決定左欄的高度，而右欄應該和左欄一樣高?？ㄆ旧淼母叨葢摵土械母叨纫粯佣?，不能更多。 如果第二列(years)的內容比可用空間高，則會出現一個溢出滾動條，如圖所示。 這里唯一的問題是，在這個設置中，正確的列高度是顯式指定的(比如height = & quot197 & quot)哪個我不要。一旦我刪除了height屬性，該列就會展開，占據視口中盡可能多的可用空間。

我試過很多方法，包括flex，css grid和absolute position，都無濟于事。絕對位置有點作用，但是右欄開始與左欄重疊。

有沒有辦法讓第二列的高度和第一列一樣？

這是我的模板布局(我已經刪除了不必要的東西):

<v-card width="500">
    <v-container>
      <v-row no-gutters>
        <v-col class="pa-1">
          <v-sheet>
            <v-row no-gutters>
              <v-col cols="3" v-for="c in 12" :key="c">
                <v-btn height="60">
                  {{ months[c - 1] }}
                </v-btn>
              </v-col>
            </v-row>
          </v-sheet>
        </v-col>

        <v-col cols="auto">
          <v-sheet>
            <v-row no-gutters>
              <v-col>
                <v-list lines="one" height="197">
                  <v-list-item-group>
                    <div v-for="n in 100" :key="n">
                      {{ n + 2000 }}
                    </div>
                  </v-list-item-group>
                </v-list>
              </v-col>
            </v-row>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-card>

可以用高度:0；最小高度:100%技巧，，其中將內部容器的高度設置為0，因此它不會影響外部容器的高度，并通過設置最小高度來恢復內部高度:

.year-container{
  height: 0;
  min-height: 100%;
  overflow: auto;
}

你可以在紙上做這個。請看下面的片段:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    
    return {
      months: ref(['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec',])
    }
  }

}
createApp(app).use(vuetify).mount('#app')

.year-container{
  height: 0;
  min-height: 100%;
  overflow: auto;
  width: 50px;
}

<link rel="stylesheet" type="text/css"  />
<link  rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-card width="500">
        <v-container>
          <v-row no-gutters>
            <v-col class="pa-1">
              <v-sheet>
                <v-row dense>
                  <v-col cols="3" v-for="c in 12" :key="c">
                    <v-btn height="60" color="orange">
                      {{ months[c - 1] }}
                    </v-btn>
                  </v-col>
                </v-row>
              </v-sheet>
            </v-col>

            <v-col cols="auto">
              <v-sheet class="year-container">
                <v-row no-gutters>
                  <v-col>
                    <v-list lines="one">
                      <v-list-item-group>
                        <div v-for="n in 100" :key="n">
                          {{ n + 2000 }}
                        </div>
                      </v-list-item-group>
                    </v-list>
                  </v-col>
                </v-row>
              </v-sheet>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>