如果overflow-y：auto，即使我将overflow-x设置为visible，overflow-x也不可见

Question

我经常遇到这个问题而且我不知道如何解决这个问题。我想要一个div，在这种情况下是一个侧边栏，在y轴上滚动。所以我添加了overflow-y: auto;，但我希望x轴是可见的，所以我添加了overflow-x: visible。

在这种情况下，我有一个位置绝对的:before元素。此元素位于侧栏的右侧。但是当我添加overflow-y：auto时，x轴变得不可见，所以我看不到我的：在元素之前。

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: "";
        }
    }
}