overflow-x not visible if overflow-y: auto, even if I set overflow-x to visible

Question

I'm having this problem quite recurrently and I have no idea how to solve this. I want a div, in this case a sidebar, to scroll on its y-axis. So I add overflow-y: auto;, but I would like that the x-axis is visible so I add overflow-x: visible.

In this case I have a :before element with position absolute. This element is positioned to the right of the sidebar. But when I add overflow-y: auto the x-axis becomes invisible so I cannot see my :before element.

HTML:

<nav class="sidebar-actions nav-about js-triple-nav js-sidebar">
    <a href="#pols-potten" class="sidebar-buttons pols-potten-button js-polspotten-sidebar selected">
        <span>
            about<br>
            <em>pols potten</em>
        </span>
    </a>
    <a href="#products" class="sidebar-buttons products-button js-product-sidebar">
        <span>
            about<br>
            <em>products</em>
        </span>
    </a>
    <a href="#designers" class="sidebar-buttons designers-button js-designers-sidebar">
        <span>
            about<br>
            <em>designers</em>
        </span>
    </a>
</nav>

CSS/SASS:

.sidebar-actions {
    width: 16.875em;
    height: 100%;
    position: fixed;
    left: 0;
    background: white;
    z-index: 1;
    border-right: 1px solid #ebebeb;
    overflow-y: auto;
    overflow-x: visible;
}

.sidebar-buttons{

    width: 100%;
    height: 33.3333333%;// fallback if no javascript active
    display: block;
    //  padding: 6.667em 0 0 1.389em;//120px 25px
    position: relative;
    @include box-sizing(border-box);
    font-weight: $font-weight-regular;
    font-size: 1.15em;//18px
    text-decoration: none;
    background: $main-white;
    color: $main-black;
    border-left: 1px solid $border-light-gray;
    border-bottom: 1px solid $border-light-gray;
    transition: all 0.25s ease;

    &:hover, &.selected{
        background: $hover-gray;
        color: $main-black;
        border-left: 1px solid $hover-gray;
        border-bottom: 1px solid $hover-gray;

        &:before{
            position: absolute;
            top: 50%;
            right: -20px;
            z-index: 10;
            margin-top: -20px;
            border-top: 20px solid transparent;
            border-left: 20px solid $hover-gray;
            border-bottom: 20px solid transparent;
            content: "";
        }
    }
}