Не срабатывает overflow-x: scroll при уменьшении окна просмотра

Question

Я хочу сделать так, чтобы блок можно было скролить при окне, меньшем размера блока с фоном.

<div class="bg-location">

</div

.bg-location {
    width: 1680px;
    height: 940px;

    background: #fff url("../img/bg/bg-location.jpg") no-repeat;

    overflow-x: scroll;
}

Answer 1

Тогда вот так:

body,
html {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100vh;
  overflow-x: auto;
  overflow-y: auto;
}

.bg-location {
  width: 1680px;
  height: 940px;
  background: #fff url("https://i.stack.imgur.com/bKuUl.jpg") no-repeat;
}

<div class="bg">
  <div class="bg-location"></div>
</div>

Или так:

.bg {
  width: 500px;
  height: 180px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.bg-location {
  width: 1680px;
  height: 940px;
  background: #fff url("https://i.stack.imgur.com/bKuUl.jpg") no-repeat;
}

<div class="bg">
  <div class="bg-location"></div>
</div>

БЛОГ НА HUSL

Не срабатывает overflow-x: scroll при уменьшении окна просмотра

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