DIV to take the height of its parent

Question

I have following HTML which works fine. But I want the div to take the height of the tab and not having to say its 200px. If I give 100% it does not work. Please ignore draggable as its 3rd party

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

Does this answer your question? [Why doesn't height: 100% work to expand divs to the screen height?](https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height) — Rob, Apr 17 '20 at 09:49

score 0 · Accepted Answer · answered Apr 17 '20 at 09:47

0

If you give the parent (b-tab) flex then the child div will inherit the height (as long as there's no implicit height assigned to the div). You will need to set the div to have flex-grow and flex-shrink as 1 (or combine them into the single flex property - flex: 1 1).

I've added some coloured borders to the two elements for demonstrating purposes:

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>

answered Apr 17 '20 at 09:47

Richard Parnaby-King

14,703
11
69
129

I do not want to specify 200px in the tab as well. My form already has a height. – user2837961 Apr 17 '20 at 10:10
`b-tab` doesn't have a height so I had to assign one for testing. You can remove this property. The only properties you need to look at is `display:flex` on the parent and `flex: 1 1` on the children. – Richard Parnaby-King Apr 17 '20 at 10:13
It still does not work. I changed overflow: scroll; on the div but then the scrollbar never comes and the tab becomes really big – user2837961 Apr 17 '20 at 10:20
I think you want to specify some max-height either on the tab or the div. – Richard Parnaby-King Apr 17 '20 at 12:50
If I have to give max-height then my original code works well. Thanks – user2837961 Apr 17 '20 at 12:58

score -1 · Answer 2 · answered Apr 17 '20 at 09:42

-1

Maybe you need to add

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

To your css most of the browsers add x margin and padding

answered Apr 17 '20 at 09:42

ThorD125

5
3

DIV to take the height of its parent

2 Answers2