Почему появляется горизонтальный скроллбар при height: 100vh;?

Question

появляется горизонтальная прокрутка при выставленном на .container-1 height в 100vh, при значении меньше все нормально. Почему так происходит?

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: black;
  color: #fff;
}

.container-1 {
  height: 100px;
  width: 100vw;
}

<div class="wrapper">
  <div class="container-1">
    Content-1
  </div>  
  <div class="container-2">
    Content-2
  </div>
</div>

Answer 1

100vw берет всю ширину окна браузера, но поскольку у вас container-2 уезжает под container-1, появляется еще вертикальная прокрутка, которую 100vw не учитывает. В итоге получается смещение и скролл

Попробуйте для container-1 поставить например height: calc(100vh - 50px); (чтобы оба блока влезли в экран), увидите, что горизонтальный скролл пропадет вместе с вертикальным

В качестве решения можно на wrapper прописать overflow-x: hidden;, но тут уже зависит от Ваших конкретных целей на верстку.

Кстати, по-умолчанию div-блок занимает всю доступную ширину (если это не переопределено), так что можете просто убрать 100vw, и все будет ок

БЛОГ НА HUSL

Почему появляется горизонтальный скроллбар при height: 100vh;?

Ответы (1 шт):