Overflow visible not working with position absolute as child element - html

Question

For the following HTML list I want to make only it only vertically scrollable and horizontally it should be visible by default.
Even after giving overflow-x as visible it is treating as scroll
<div class="container">
<div class="inner-container">
<div>Item 1</div>
<div class="hover-arrow"></div>
</div>
<div class="inner-container">
<div>Item 2</div>
<div class="hover-arrow"></div>
</div>
<div class="inner-container">
<div>Item 3</div>
<div class="hover-arrow"></div>
</div>
<div class="inner-container">
<div>Item 4</div>
<div class="hover-arrow"></div>
</div>
</div>
.container {
width: 100px;
overflow-y: scroll;
overflow-x: visible;
border: 1px solid black;
height: 200px;
}
.inner-container {
position: relative;
height: 100px;
background: grey;
}
.hover-arrow {
position: absolute;
right: -20px;
bottom: 0;
border-left: 20px solid grey;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
JS fiddle for the same
https://jsfiddle.net/m148ujcn/

Answer 1

According to W3Specs:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise, it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
In short:
If we set overflow-x or overflow-y to visible and something else for
the others, then visible value gets treated as auto
Made some changes in your fiddle check this: JSFiddle
<div class="wrapper">
<div class="container">
<div class="inner-container">
<div style="padding: 20px 20px 20px 30px;">Item 1</div>
<div class="hover-arrow"></div>
</div>
<div class="inner-container">
<div style="padding: 20px 20px 20px 30px;">Item 2</div>
<div class="hover-arrow"></div>
</div>
<div class="inner-container">
<div style="padding: 20px 20px 20px 30px;">Item 3</div>
<div class="hover-arrow"></div>
</div>
</div>
</div>