’m building a mega dropdown menu. When the dropdown opens, the page gets a horizontal scrollbar (the layout “shifts” and I can scroll left/right). My nav is inside a centered container, but the dropdown uses position:absolute and width:100vw.
Expected: dropdown opens without creating horizontal scroll
Actual: horizontal scrollbar appears when dropdown is shown
Here is a minimal example:
* { 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;}<header><section class="navigation container"><nav id="nav1"><ol><li class="has-menu"><a href="#">Mobile</a><div class="menucontent-style"><div>Left column</div><div>Right column</div></div></li></ol></nav></section></header>