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

Чтобы создать горизонтальный скролл для блока с несколькими колонками, нужно использовать стили CSS для настройки его поведения. Ваша разметка уже довольно хороша, осталось лишь немного доработать CSS. Вот пример, как это можно сделать:

```css
.body {
    display: flex; /* Используем flexbox для размещения колонок в один ряд */
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
    white-space: nowrap; /* Отключаем перенос строк */
}

.column {
    display: inline-block; /* Позволяет колонкам располагаться в ряд */
    width: 200px; /* Устанавливаем ширину для каждой колонки (можете изменить по своему усмотрению) */
    margin: 10px; /* Добавляем некоторые отступы между колонками */
}

.item {
    padding: 10px;
    border: 1px solid #ccc; /* Добавляем границу для визуальной разделимости */
    background-color: #f5f5f5; /* Фоновый цвет для элементов */
}
```

Объяснение:
- `display: flex;` на элементе `.body` позволяет содержимому располагаться в горизонтальном ряду.
- `overflow-x: auto;` включает прокрутку по горизонтали, когда содержимое превышает ширину контейнера.
- `white-space: nowrap;` предотвращает перенос строк, что важно для сохранения горизонтального ряда элементов.
- `display: inline-block;` на элементе `.column` позволяет колонкам занимать ширину, установленную в CSS, и оставаться упорядоченными в ряд.

Также не забудьте добавить медиа-запрос, чтобы убедиться, что эти стили применяются только на разрешении 768px и меньше:

```css
@media (max-width: 768px) {
    .body {
        /* Стили для горизонтального скролла будут применяться только здесь */
        overflow-x: auto;
    }
}
```

Таким образом, код HTML работает с указанными стилями CSS и дает возможность горизонтальной прокрутки. Вы можете настроить ширину колонок и отступы по своему желанию для достижения оптимального внешнего вида.

.body{ <br/> display: flex; <br/> margin: -10px; <br/> max-width: 100vw; <br/> overflow:scroll; <br/> } <br/> <br/> .column{ <br/> flex: 0 1 auto; <br/> padding: 10px; <br/> } <br/> c такими стилями и без всяких медиа-запросов скролл появляется только у самого блока <br/> <br/> у вас <br/> <br/> .body{ <br/> display:flex; <br/> flex-wrap:wrap;  // тут у вас есть разрешение блоку переносить не уместившийся контент на вторую строку <br/> margin: -10px; <br/> } <br/> <br/> .column{ <br/> flex: 0 1 auto; <br/> padding: 10px; <br/> } <br/> <br/> <a href="https://qna.habr.com/user/media" rel="nofollow">media</a> (max-width: 768px) { <br/> .body{ <br/> min-width: 1176px; // в этом вообще смысла нет, потому что есть разрешение на перенос - все что не поместилось, просто пойдет во вторую строку и даст вам дурацкий не работающий скроллбар снизу <br/> overflow:scroll; <br/> } <br/> }