Как установить одинаковую высоту вертикальной части навигации «b-tabs» и части контента (на основе части контента)

Question

Я хочу получить значение max-height из другого места (например, vue data :) и применить его к части навигации b-tabs. Я знаю, что мы можем создать класс css и установить его на nav-class, чтобы изменить стиль в части навигации, но мне не удалось обновить стиль, который я установил для nav-класса.

Я хочу установить для высоты содержимого 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

вот пример решение .