css溢出自动，固定网格菜单不工作

嗨，我正在研究一个挑战，我正在使用CSS网格实现它

我唯一的最后一个问题是，我需要最上面的菜单，它的固定宽度为520px，固定位置可在较小的设备上水平轴滚动，请告知

由于某种原因溢出-x：自动；在这种情况下似乎不起作用

<!--html-->
<main>
    <div class="main-menu-container">
        <ul class="main-menu">
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" >ALL</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="a">A</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="b">B</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items"data-griditem="c">C</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="d">D</a></li>
            <li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="e">E</a></li>
        </ul>
    </div>
    <section class="main-grid">
        <article class="main-grid__item main-grid__item--type-a is-visible">A</article>
        <article class="main-grid__item main-grid__item--type-c is-visible">C</article>
        <article class="main-grid__item main-grid__item--type-b is-visible">B</article>
        <article class="main-grid__item main-grid__item--type-e is-visible">E</article>
        <article class="main-grid__item main-grid__item--type-b is-visible">B</article>
        <article class="main-grid__item main-grid__item--type-d is-visible">D</article>
        <article class="main-grid__item main-grid__item--type-a is-visible">A</article>
        <article class="main-grid__item main-grid__item--type-b is-visible">B</article>
        <article class="main-grid__item main-grid__item--type-c is-visible">C</article>
        <article class="main-grid__item main-grid__item--type-d is-visible">D</article>
        <article class="main-grid__item main-grid__item--type-a is-visible">A</article>
        <article class="main-grid__item main-grid__item--type-e is-visible">E</article>
    </section>
</main>
<script src="js/site.js" type="text/javascript" ></script>

---

您需要使用class“.main menu container”更改元素以更改响应中的宽度，它不依赖于main，因为它是固定的。此外，还需要为“li”元素设置宽度，因为它们正在适应父宽度，并且仅在较低宽度的空间中生成自动滚动。关于，

在演示中，您将最上面的菜单（

.main menu

）设置为

宽度：910px

.main-menu {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    padding: 0;
    position: static;
    overflow-x: auto;
    margin: 0;
    padding: 1em 0;
    background: #fff;
    width: 910px;     <----------
    height: 100%;
}

.main-menu-container {
    position: absolute;
    width: 910px;     <----------
    top: 0;
    left: 15px;
}

因为它们在任何时候都是相同的宽度，所以无论屏幕大小如何，都不可能出现溢出

要允许出现溢出情况，请对父项进行此调整：

.main-menu-container {
    position: absolute;
    /* width: 910px; */
    top: 0;
    left: 15px;
    width: 100%;       /* new */
    overflow-x: auto;  /* new */
}

.main-menu-container {
    position: absolute;
    /* width: 910px; */
    top: 0;
    left: 15px;
    width: 100%;       /* new */
    overflow-x: auto;  /* new */
}