Cómo forzar que la lista desplegable se desborde sobre el contenedor de la tabla.

Estoy atascado en cómo hacer que la lista desplegable desborde su contenedor, que en mi caso es una celda de tabla.

Aquí tienes el ejemplo:

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>

El ejemplo mencionado anteriormente básicamente simula la clase .table-responsive de Bootstrap. Mi objetivo es hacer que el contenedor tenga desplazamiento horizontal, pero permitir que la lista desplegable desborde verticalmente. Sin embargo, a pesar de haber configurado overflow-y: visible, el contenedor siempre tiene desplazamiento vertical.

¿Se puede lograr esto de alguna manera?
¡Gracias!