如何设置组件的最大高度？

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>