vertical scrollable table in flexbox

Question

I have trying to make scrollable tbody in flexbox.

I got two flexbox and each flexbox has table in it.

When items in table are overflow I want to use vertical scrollbar in tbody.

But tables are in flexbox that has no fixed height.

What should I do to show vertical scrollbar in tbody?

.root {
  background-color:green;
  width: 200px;
  height: 200px;
  display: flex;
  flex-flow:column nowrap;
}

.container1 {
  display: flex;
  flex-grow:4;
  background-color:yellow;
}

.container1 tbody {
  overflow: auto;
}

.container2 {
  display: flex;
  flex-grow:3;
  background-color:blue;
}

<div class="root">
  <div class="container1">
    <table>
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container2">
      <table>
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Let me know if you need more info. thanks.

You should add `display:block` in `tbody` and set fixed height as you want. — Ngorld, Jul 31 '19 at 10:03
@JillAndMe Please check below, i think it will solve the issue. — Amarjit Singh, Jul 31 '19 at 10:15
@AmarjitSingh thanks for your work, but I want to make scrollable only tbody — JillAndMe, Jul 31 '19 at 10:16
to trigger a vertical scrollbar, you need either to set an height or a max-height to start with. Maybe this can help too https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771 — G-Cyrillus, Jul 31 '19 at 10:23

score 0 · Answer 1 · answered Jul 31 '19 at 10:07

0

you should use overflow auto

css

.container1 {
  display: flex;
  flex-grow:4;
  background-color:yellow;
  overflow:auto;
}

answered Jul 31 '19 at 10:07

Ranjith v

1,032
5
15

score 0 · Answer 2 · answered Jul 31 '19 at 10:11

I have made some changes please check !

.root {
  background-color:green;
  width: 60vw;
  height: 30vh;
  display: flex;
  flex-flow:column nowrap;
}

.container1 {
  display: flex;
  flex-grow:4;
  background-color:yellow;
  overflow-y: auto;
}


/* this flexbox is not appears!! */
.container2 {
  display: flex;
  flex-grow:3;
  background-color:blue;
}

<div class="root">
  <div class="container1">
    <table width="100%">
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container2">
  </div>
</div>

vertical scrollable table in flexbox

2 Answers2