Why does my div has a vertical scroll even though overflow-y is set to visible?

Question

I have an html table that I want to able scroll horizontally, and never vertically.

HTML goes basically like this:

<div id="wrapper">
    <table id="the-table"></table>
</div>

CSS:

#wrapper {
  overflow-x: scroll;
  overflow-y: visible;
}

When the css is set this way. I see two scrolls: vertical and horizontal.

The table has several select elements in every row. I want them to overflow vertically when they are clicked.

The reason for the horizontal scroll is that I want it to be scrollable in the smaller screens.

Edit: overflow-y: hidden does not work because the select elements in every row. I absolutely want them to overflow vertically.