DIV, чтобы взять высоту своего родителя

Question

У меня есть следующий HTML, который работает нормально. Но я хочу, чтобы div занимал высоту вкладки и не говорил 200px. Если я даю 100%, это не работает. Пожалуйста, не обращайте внимания на перетаскиваемый как его третье лицо

<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>

CSS

.custom-scrollbar {
  position: relative;
  height: 200px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}

Answer 1

Если вы дадите родителю (b-tab) изгиб, то потомок div будет наследовать высоту (при условии, что для div не назначена неявная высота). Вам нужно установить div, чтобы flex-grow и flex-shrink были равны 1 (или объединить их в одно свойство flex - flex: 1 1).

Я добавил несколько цветных границ для двух элементов в демонстрационных целях:

b-tab {
  border: 1px solid red;
  height: 200px;
  display: flex;
}

.custom-scrollbar {
  position: relative;
  overflow: auto;
  border: 1px solid blue;
  flex: 1 1;
}

.table-wrapper-scroll-y {
  display: block;
}

<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>

Answer 2

Может быть, вам нужно добавить

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

К вашим css большинству браузеров добавить x margin и padding