Как сделать горизонтальный скролл блока с несколькими колонками?

Question

[prokopn]

Подскажите как на разрешении 768px сделать горизонтальный скролл блока, но что-бы контент был в несколько колонок? сейчас скролл появляется, но не скроллится.

<div class="body">
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
  <div class="column">
    <div class="item">ТЕКСТ</div>
  </div>
</div>

.body{
  display:flex;
  flex-wrap:wrap;
  margin: -10px;
}

.column{
  flex: 0 1 auto;
  padding: 10px;
}

.item{
  border: 1px solid red;
}

@media (max-width: 768px) {
  .body{
    min-width: 1176px;
    overflow:scroll;
  }
}

Comments

[askurashev]

Скролится.

[prokopn]

askurashev, скроллится страница, не блок

[Ankhena]

Вопрос на засыпку: откуда возьмется скролл, если контент помещается в блок?

Ширину вы ограничили (Правда, с виду странно ограничивать её 1176 при ширине вьюпорта 768. И логично, что при этос будет скролл у body).
А высоту не ограничили.
Значит, блок просто будет расти вниз, никакой контент из него не вываливается и, логично, скролл не нужен.

Answer 1

[Евгения]

.body{
display: flex;
margin: -10px;
max-width: 100vw;
overflow:scroll;
}

.column{
flex: 0 1 auto;
padding: 10px;
}
c такими стилями и без всяких медиа-запросов скролл появляется только у самого блока

у вас

.body{
display:flex;
flex-wrap:wrap; // тут у вас есть разрешение блоку переносить не уместившийся контент на вторую строку
margin: -10px;
}

.column{
flex: 0 1 auto;
padding: 10px;
}

media (max-width: 768px) {
.body{
min-width: 1176px; // в этом вообще смысла нет, потому что есть разрешение на перенос - все что не поместилось, просто пойдет во вторую строку и даст вам дурацкий не работающий скроллбар снизу
overflow:scroll;
}
}