Css DIV以获取其父级的高度

我有以下HTML的工作很好。但是我想让div取标签的高度，而不是说它是200px。如果我100%的付出，它就不起作用了。请忽略作为其第三方的draggable

<b-tab title="TAB">
  <div class="table-wrapper-scroll-y custom-scrollbar">
    <table class="table table-sm table-bordered table-striped table-hover">
      <draggable :list="myLoop" :options="dragOptions" :element="'tbody'" class="rows">
        <tr class="cursor-ns-resize" v-for="(row, index) in myLoop" :key="index">
          <td>
            <b-form-checkbox type="checkbox" v-model="row.checked" />
          </td>
          <td>
            <span>{{ row.label }}</span>
          </td>
        </tr>
      </draggable>
    </table>
  </div>
</b-tab>

也许你需要补充一下

*{//this effects every element
margin:0;
padding:0;
}

大多数浏览器都会在css中添加x边距和填充

如果您给父级（

b-tab

）flex，那么子级

div

将继承高度（只要没有为

div

指定隐式高度）。您需要将

div

设置为

flex-grow

和

flex-shorn

为1（或将它们组合到单个

flex

属性-

flex:1

）

为了演示，我在两个元素中添加了一些彩色边框：

b-tab{
边框：1px纯红；
高度：200px；
显示器：flex；
}
.自定义滚动条{
位置：相对位置；
溢出：自动；
边框：1px纯蓝色；
弹性：1；
}
.table-wrapper-scroll-y{
显示：块；
}

{{row.label}}

这是否回答了您的问题？我也不想在选项卡中指定200px。我的表单已经有了高度。

b-tab

没有高度，所以我必须指定一个用于测试。您可以删除此属性。您需要查看的唯一属性是父级上的

display:flex

，子级上的

flex:1

。它仍然不起作用。我改变了溢出：滚动；在div上，但是滚动条永远不会出现，选项卡变得非常大。我想您应该在选项卡或div上指定一些最大高度。如果必须指定最大高度，那么我的原始代码工作得很好。谢谢

*{//this effects every element
margin:0;
padding:0;
}