如何设置组件最大高度？

Question

“引导程序”：“^4.1.2”

“bootstrap-vue”：“^2.0.0-rc.11”

“vue”：“^2.5.11”

我通过文本字段获得了一个表格组件。

我要做的是在表格组件上设置 max-height 以设置与文本字段相同的高度。

我尝试的是......

  <div class="test">
      <vocatable></vocatable>
  </div>

  <style>
  .test {
    max-height: 50px;
  }
  </style>

但是，失败了……有什么想法吗？

这是我的代码

<template>
  <div>
    <b-container class="mt-4">

      <b-row>
        <b-col>
          <main class="header mt-2 mb-2">
            <p>빠르고 간단하게 텍스트를 단어시험지로 만들어 보세요.</p>
          </main>
        </b-col>
      </b-row>

      <b-row>
        <b-col sm="4" class="h-25">
          <main class="main">
            <b-form-textarea v-b-popover.hover="'첫 줄은 단어시험지의 헤더, 각 단어 사이는 \',\'로 구분합니다.'"
            placeholder=
            "영어단어, 한글
  Simple, 간단한
  Voca, 단어
  Test paper, 시험지 "
              title="사용법" autofocus class="text-field" id="inputField" no-resize :rows="20" :max-rows="20" v-model="text" />
          </main>
        </b-col>

        <b-col sm="4">
            <vocatable></vocatable>
        </b-col>

        ...
    </b-container>

  </div>
</template>

Answer 1

这是我的解决方案。

<b-col sm="4"  class="h-25" style="background-color:green; max-height:200px; overflow:auto;">
        <vocatable></vocatable>
</b-col>