CSS-溢出-y：滚动；

Question

我需要制作菜单的滚动类型，因为所有项目都不适合菜单部分。我放入css溢出-y：滚动，但是有些对象也不在正确的位置。我需要所有主题都适合“设置”框，它仅从第5个元素开始，将前4个元素从可见内容推到顶部。我该如何解决这个问题？ picture

scss：

.settings_active{
        margin-left: 1px;
        margin-right: 1px;
        animation: fadein 2s;
        -moz-animation: fadein 2s; /* Firefox */
        -webkit-animation: fadein 2s; /* Safari and Chrome */
        -o-animation: fadein 2s;
        margin-top: 0px;
        margin-bottom: 0;
        list-style: none;
        transition: 0.5s all;
        padding-left: 5px;
        padding-top: 5px;
        /* padding-bottom: 5px; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 50px;
        overflow: hidden;
        overflow-y: auto;
        /* padding-bottom: 40px; */
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid white;
        /* border: 1px solid; */
        a{
            /* display: block; */
            position: relative;
            transition: 0.5s all;
            color: #fff;
            text-decoration: none;
            &:hover{
                color: $green;
                &:before{
                    content:'';
                    display: block;
                    width: 5px;
                    height: 2px;    
                    background-color: #fff;
                    position: absolute;
                    left: -10px;
                    top: 10px;
                }
                &:after{
                    content:'';
                    display: block;
                    width: 5px;
                    height: 2px;    
                    background-color: #fff;
                    position: absolute;
                    right: -10px;
                    top: 10px;
                }
            }
        }
        li{
            margin-bottom: 4px;
            list-style-type: none;
            border-bottom: 2px solid;
            border-color: $blue;
            /* border-bottom-width: 15vw; */
        }
        background-color: rgba(34, 34, 34, 0.20);
    }

还有html：

<ul class="settings_list">
                            <li class="settings_item"><a href="#">Charges</a></li>
                            <li class="settings_item"><a href="#">Templates</a></li>
                            <li class="settings_item"><a href="#">Consumables</a></li>
                            <li class="settings_item"><a href="#">Equipment</a></li>
                            <li class="settings_item"><a href="#">Tools & Inventories</a></li>
                            <li class="settings_item"><a href="#">Activity Codes</a></li>
                            <li class="settings_item"><a href="#">Whiteboard</a></li>
                            <li class="settings_item"><a href="#">Rigs</a></li>
                            <li class="settings_item"><a href="#">Policy Documents</a></li>
                            <li class="settings_item"><a href="#">Expenses Categories</a></li>
                            <li class="settings_item"><a href="#">Certification</a></li>
                            <li class="settings_item"><a href="#">Estimate Terms</a></li>
                            <li class="settings_item"><a href="#">Regions</a></li>
                            <li class="settings_item"><a href="#">Subcontractor</a></li>
                            <li class="settings_item"><a href="#">LOA / Shop</a></li>
                            <li class="settings_item"><a href="#">HSE Topics</a></li>
                            <li class="settings_item"><a href="#">Empl Assessment</a></li>
                            <li class="settings_item"><a href="#">Site Inspections</a></li>
                            <li class="settings_item"><a href="#">Offline Computers</a></li>
                            <li class="settings_item"><a href="#">Hole Size</a></li>
                            <li class="settings_item"><a href="#">Well Size</a></li>
                        </ul>