css переполнение авто с фиксированным меню сетки не работает

Question

Привет, я работаю над проблемой, которую я реализую, используя сетку CSS.

Моя единственная последняя проблема заключается в том, что мне нужно самое верхнее меню, которое имеет фиксированную ширину в 520 пикселей и фиксированное положение для прокрутки на небольших устройствах на горизонтальной оси, пожалуйста, сообщите?

По какой-то причине overflow-x: auto; в этом случае не работает ....

<!--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>

CSS:

body {
padding: 0;
margin:0;
 }

main {
 max-width: 940px;
 margin: 0 auto;
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',   'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 position: relative;
 padding: 0 15px;
  box-sizing:border-box;

  }
.main-menu-container {
position: fixed;
width: 910px;
top:0;
float:left;
height: 40px;

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


 }

.main-menu__link {
display: block;
text-align: center;
padding:0.4em;
background-color: #9A9B9E;
color: #fff;
text-decoration: none;

 }

https://codepen.io/angusgrant/pen/Xqzrry

Answer 1

В вашей демонстрации у вас самое верхнее меню (.main-menu), установленное на width: 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), также установленный на width: 910px.

.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 */
}

пересмотренная кодовая ручка

Answer 2

Вам нужно изменить элемент с классом ".main-menu-container", чтобы изменить ширину в отзывчивом, он не зависит от основного, так как он фиксирован. Также вам нужно установить ширину для элементов "li", потому что они адаптируются к родительской ширине и только в пространствах с меньшей шириной они генерируют автоматическую прокрутку. С уважением,