Vue JS Make a table scrollable

I've been unsuccessful trying to get a table to be scrollable. In my example I have 6 rows and only want to show 3 and scroll to see the other rows. Below is what I've tried with no success doing it. Can someone please show me what I'm doing wrong. I've looked through prior posts and have tried different solutions but none have worked for me.

<div v-for="(user, index) in initialData" :key="index" id="container" ref="container" class="scrollable" >
    <table >
      <tr>
        <td>
    <Avatar
        :user="user"
        :alt="user.name"
        backgroundColor=""
        hoverBackgroundColor=""
        :size="45"
      />
        </td>
        <td ></td>
        <td >
    <span>
      {{ user.name }} <br>
      {{ user.email }}
    </span>
        </td>
        <td ></td>
        <td>
    <img src="../images/circle-x.png">
        </td>
      </tr>
    </table>
  </div>

table {
   height: 75px;
  }
  .scrollable {
    height: 75px;
    overflow-y: scroll;
    // border-bottom: 1px solid #ddd;
  }
  td:nth-child(1) {
      width: 20%;
  }
  td:nth-child(2) {
      width: 10%;
  }
  td:nth-child(3) {
      width: 30%;
      text-align: left;
  }
  td:nth-child(4) {
      width: 10%;
  }
  td:nth-child(5) {
      width: 30%;
      text-align: right;
  }

I figured out what I was doing wrong Below is the code I used to get it to scroll.

<div id="container" ref="container" class="shared-access">
  <table>
    <tr
      v-for="(user, index) in initialData"
      :key="index"
      class="shared-access__table__row"
    >
      <td>
        <Avatar
          :user="user"
          :alt="user.name"
          :size="50"
          hoverBackgroundColor="transparent"
          backgroundColor="transparent"
          padding="p-0"
        />
      </td>
      <td>
        <p class="text-sm">
          {{ user.name }}
        </p>
        <a :href="`mailto:${user.email}`">
          {{ user.email }}
        </a>
      </td>
      <td>
        <div @click="revokeUser()" class=" cursor-pointer">
          <i class="fal fa-times-circle"></i>
        </div>
      </td>
    </tr>
  </table>
</div>

.shared-access {
  height: 20vh;
  overflow-y: scroll;
  &__table {
    &__row {
      &:nth-child(odd) {
        @apply bg-gray-200;
      }
      td {
        padding: 0.5rem;
      }
    }
  }
}