Задать вопрос
@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;
  }
}
  • Вопрос задан
  • 45 просмотров
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы