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

[Anonymous]

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

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

• Mobile
  
  Left column
  Right column

*{ 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;
}


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