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

Чтобы вынести горизонтальный скролл в родительский контейнер и оставить вертикальный скролл, можно воспользоваться следующим подходом:

1. Установите для родительского контейнера CSS свойство overflow со значением auto, чтобы появились скроллы при необходимости.

.parent-container {
  overflow: auto;
}

2. Для контейнера с горизонтальным контентом установите ширину элемента на значение, превышающее ширину родительского контейнера.

.horizontal-container {
  width: 1000px; /* Пример ширины, можете использовать любое подходящее значение */
}

3. Установите для контейнера с горизонтальным контентом CSS свойство white-space со значением nowrap, чтобы контент не переносился на новую строку.

.horizontal-container {
  white-space: nowrap;
}

4. Также необходимо добавить свойство display: inline-block; для элементов внутри контейнера, чтобы они не переносились на новую строку и растягивали контейнер по ширине.

.horizontal-item {
  display: inline-block;
}

5. В итоге, у вас должен быть родительский контейнер с горизонтальным скроллом и вертикальным скроллом, а контент внутри контейнера будет выравнен горизонтально.

Пример HTML разметки:

<div class="parent-container">
  <div class="horizontal-container">
    <div class="horizontal-item">Item 1</div>
    <div class="horizontal-item">Item 2</div>
    <div class="horizontal-item">Item 3</div>
    <!-- Добавьте другие элементы для горизонтального скролла -->
  </div>
</div>

Пример CSS стилей:

.parent-container {
  width: 300px; /* Пример ширины, можете использовать другое значение */
  height: 200px; /* Пример высоты, можете использовать другое значение */
  overflow: auto;
}

.horizontal-container {
  width: 1000px; /* Пример ширины, можете использовать любое подходящее значение */
  white-space: nowrap;
}

.horizontal-item {
  display: inline-block;
}

Это позволит вам создать родительский контейнер с горизонтальным скроллом, оставив вертикальный скролл и выравнив контент по горизонтали.