我有一个正在构建的滑块组件。它使用Bootstrap .container类来包含在指定的页面宽度中，但需要溢出到屏幕的右侧。如果我使用overflow-x：visible，它会向右溢出，但整个页面会滚动。如果我给予父overflow：hidden，那么我就无法滚动滑块。
在不影响整个页面的情况下，同时允许overflow-x：visible和允许滚动条滚动的最佳方法是什么？
HTML

<div id="main-container">
    <section class="container">
        <ul class="panels">
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
            <li class="panel"></li>
        </ul>
    </section>
</div>

字符串
CSS

#main-container {
   overflow: hidden;
}
.panels {
   overflow-x: visible;
   display: flex;
   height: auto;
   width: auto;
   list-style: none;
   margin: 0;
   padding: 0;
}

型