Мегараскрывающийся список CSS вызывает горизонтальную прокрутку при открытии (100vw внутри контейнера) ⇐ Html

[Anonymous]

Я создаю мегавыпадающее меню. Когда открывается раскрывающийся список, на странице появляется горизонтальная полоса прокрутки (макет «смещается», и я могу прокручивать влево/вправо). Моя навигация находится внутри контейнера по центру, но в раскрывающемся списке используется позиция: абсолютная и ширина: 100vw.
Ожидается: раскрывающийся список открывается без создания горизонтальной прокрутки.

Факт: появляется горизонтальная полоса прокрутки, когда отображается раскрывающийся список.
Вот минимальный пример:

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
width: min(1100px, 100%);
margin: 0 auto;
padding: 0 16px;
}

.navigation {
display: flex;
align-items: center;
}

.has-menu {
position: relative;
}

/* dropdown */
.menucontent-style {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
/* likely cause? */
padding: 30px 80px;
display: none;
background: #fff;
box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
}

.has-menu:hover .menucontent-style {
display: flex;
}

Код: Выделить всё

[list]
[*]
[url=#]Mobile[/url]


Left column
Right column


[/list]

Подробнее здесь: https://stackoverflow.com/questions/798 ... -container