Scrollbar for one direction, but overflow visible in another - css

Question

I have this element I'm trying to develop where on the X axis, I need to scroll, but on the Y axis, I would need to see the overflow.
Its selects where you may scroll through the selects, but when you open one you need to still see the options.
But when I ask 'overflow-x:scroll', the overflow-y is forced to scroll or be hidden. overflow-y is ignored.
Is there a way to make it so the overflow on the x is kept on scroll (or is scrollable) but the y axis can still overflow its container?
EDIT: Added a quick example of how my code looks and what I'm working with.
.scroller {
max-width: 300px;
overflow-x: scroll;
overflow-y: visible;
white-space: nowrap;
padding: 16px 0;
}
.select {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 100px;
margin-right: 16px;
}
.selectLabel {
width: 100%;
border: 1px solid #000;
padding: 8px;
box-sizing: border-box;
}
.selectOptions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #000;
padding: 8px;
box-sizing: border-box;
}
<div class="scroller">
<div class="select">
<div class="selectLabel">Hello</div>
<div class="selectOptions">
Hello<br /> World
<br /> And
<br /> Stack
</div>
</div>
<div class="select">
<div class="selectLabel">Hello</div>
<div class="selectOptions">
Hello<br /> World
<br /> And
<br /> Stack
</div>
</div>
<div class="select">
<div class="selectLabel">Hello</div>
<div class="selectOptions">
Hello<br /> World
<br /> And
<br /> Stack
</div>
</div>
<div class="select">
<div class="selectLabel">Hello</div>
<div class="selectOptions">
Hello<br /> World
<br /> And
<br /> Stack
</div>
</div>
<div class="select">
<div class="selectLabel">Hello</div>
<div class="selectOptions">
Hello<br /> World
<br /> And
<br /> Stack
</div>
</div>
</div>

Answer 1

Give this a go
overflow-x: scroll;
overflow-y: visible;