Как вынести горизонтальный скролл в родительский контейнер, оставив вертикальный скролл?
Примерно такая структура ->
<div class='wrapper'> <div class='header'>{...}</div> <div class='body'>{...}</div> </div> |
<div class='wrapper'> <div class='header'>{...}</div> <div class='body'>{...}</div> </div>
Ссылка на песочницу
Мне нужно чтобы вертикальный скролл был в контейнере body, а горизонтальный во wrapper контейнере
Сейчас получается при добавлении вертикального скролла в body в нем автоматически появляется горизонтальный. При попытке скрыть горизонтальный скролл ( overflow-x: hidden ) body обрезается и горизонтальный скролл в родителе на него не срабатывает
Как можно такое реализовать ?
Если делать не на дивниках, а использовать табличные теги, то получается реализовать
Пример таблицы с желаемым поведением
Дополнительно:
добавление width: min-content; для .body может помочь, но не это не точно
проблема в том, что столбцы таблицы связаны между собой, а дивы — нет
так?
snippet
- Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы вынести горизонтальный скролл в родительский контейнер и оставить вертикальный скролл, можно использовать следующий подход.
Допустим, у вас есть родительский контейнер с классом "container", в котором содержится длинное содержимое, которое не помещается по горизонтали. Вы хотите добавить горизонтальный скролл, чтобы пользователь мог прокручивать содержимое вправо и влево, оставив вертикальный скролл для прокрутки вверх и вниз.
Прежде всего, убедитесь, что у родительского контейнера установлены следующие стили:
```html
```
```css
.container {
width: 100%; /* Ширина контейнера */
height: 300px; /* Высота контейнера */
overflow-x: auto; /* Горизонтальный скролл */
overflow-y: scroll; /* Вертикальный скролл */
}
```
В данном примере, мы устанавливаем ширину контейнера на 100% и высоту 300px. Также добавляем свойство `overflow-x: auto;`, которое добавляет горизонтальный скролл, если содержимое выходит за пределы контейнера по горизонтали. Свойство `overflow-y: scroll;` оставляет вертикальный скролл для прокрутки содержимого по вертикали.
Теперь при прокрутке содержимого по горизонтали, будет отображаться горизонтальный скролл, а вертикальный скролл останется для прокрутки вверх и вниз.
Надеюсь, это поможет вам решить вашу проблему. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.