How to force the dropdown to overflow table wrapper?

Question

I'm stuck on how to make the dropdown overflow it's container, which in my case is a table cell.

Here's the example:

let content = document.querySelector('.content');
let abs = document.querySelector('.dropdown');
content.addEventListener('click', function () {
  abs.classList.toggle('is-hidden');
});

.wrapper {
  width: 500px;
  overflow-x: auto;
  overflow-y: visible;
}

.content {
  width: 1000px;
  height: 150px;
}
.content td {
  position: relative;
  border: 1px solid #ccc;
}

.dropdown {
  position: absolute;
  background: green;
  top: 30px;
  left: 10px;
  width: 100px;
  height: 300px;
}

.is-hidden {
  display: none;
}

<div class="wrapper">
  <table class="content">
    <tr>
      <td></td>
      <td><div class="dropdown"></div></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

The above mentioned example basically simulates the bootstrap .table-responsive class. My goal is to make the wrapper scroll horizontally, but to allow the dropdowns to overflow it vertically. But even though I have set the overflow-y: visible, the wrapper always scrolls vertically.

Can this be achieved somehow? Thanks!

Answer 1

Replace your existing CSS with this.

.dropdown {
    position: fixed;
    background: green;
    width: 100px;
    height: 300px;
}