如何将垂直“ b-tabs”导航部分和内容部分的高度设置为相同（基于内容部分）

Question

我想从其他地方（例如vue数据：）获取“最大高度”值，并将其应用于“ b-tabs”导航部分。我知道我们可以创建一个css类并将其设置为“ nav-class”来更改导航部分的样式，但是我无法更新设置为nav-class的样式。

我想将“ b-tabs”的内容高度设置为导航部分的高度。

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs vertical content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
          {{ category.name }} I want to set this part height to the leftnigation panel so that the left side height is the same as the right side
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    categories: [
      { name: "1" },
      { name: "2" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" },
      { name: "3" }
    ]
  }
})

.wrap {
  overflow: hidden;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 500px;
  max-height: 100px;
  overflow: auto;
}

我希望左侧面板的高度与右侧面板的高度相同。

Answer 1

这是示例solution。