Мобильная версияCSS Grid с переполнением только в одной из строк ⇐ CSS
-
Гость
CSS Grid с переполнением только в одной из строк
Я не уверен, возможно ли это с помощью CSS Display Grid, но мне бы хотелось, чтобы одна строка моей сетки имела вертикальное переполнение, а другая — нет.
.container { размер коробки: граница-коробка; высота: 350 пикселей; максимальная ширина: 300 пикселей; граница: серая, пунктирная, 3 пикселя; переполнение: скрыто; дисплей: сетка; области шаблонов сетки: 'элемент-a' 'элемент-b'; сетки-шаблона-строк: 1fr 120 пикселей; столбцы шаблона сетки: 200 пикселей; цвет фона: серый; .item-a { область сетки: элемент-а; граница: 3 пикселя, пунктирная зеленая; переполнение-х: авто; переполнение-y: скрыто; ширина: 600 пикселей; цвет фона: зеленый; } .item-b { область сетки: элемент-b; граница: желтая пунктирная граница размером 3 пикселя; цвет фона: желтый; } Ребенок-сетка 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gradida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis подавай ниси ми ут печаль. Duis aliquam interdum ipsum. Эней id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed actor efficitur viverra. Энейский iaculis enim diam, eget sodales augue consequat volutpat. Прэсент Placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, Malesuada aliquet sapien. Нуллам аликвам Magna и Congue Sollicitudin. Сетка Ребенок 2
Идея состоит в том, чтобы горизонтальная прокрутка была только внизу зеленого поля. Я могу добавить прокрутку в контейнер, но при этом будет прокручиваться и содержимое желтого поля, а мне это не нужно.
Я также могу изменить структуру HTML и CSS и вместо этого использовать flex для достижения результата, но это добавит некоторые другие последствия для фактического решения, которое я создаю.
Просматривая Stackoverflow и Google, я смог найти только вопросы и решения для вертикальной прокрутки. Я пробовал применять те же идеи по установке определенной ширины к материалам, но после различных комбинаций мне не удалось найти ту, которая давала бы желаемый результат.
Версию скрипки можно найти здесь: https://jsfiddle.net/esantiagovieira/dkv06zmw/
Я не уверен, возможно ли это с помощью CSS Display Grid, но мне бы хотелось, чтобы одна строка моей сетки имела вертикальное переполнение, а другая — нет.
.container { размер коробки: граница-коробка; высота: 350 пикселей; максимальная ширина: 300 пикселей; граница: серая, пунктирная, 3 пикселя; переполнение: скрыто; дисплей: сетка; области шаблонов сетки: 'элемент-a' 'элемент-b'; сетки-шаблона-строк: 1fr 120 пикселей; столбцы шаблона сетки: 200 пикселей; цвет фона: серый; .item-a { область сетки: элемент-а; граница: 3 пикселя, пунктирная зеленая; переполнение-х: авто; переполнение-y: скрыто; ширина: 600 пикселей; цвет фона: зеленый; } .item-b { область сетки: элемент-b; граница: желтая пунктирная граница размером 3 пикселя; цвет фона: желтый; } Ребенок-сетка 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gradida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis подавай ниси ми ут печаль. Duis aliquam interdum ipsum. Эней id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed actor efficitur viverra. Энейский iaculis enim diam, eget sodales augue consequat volutpat. Прэсент Placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, Malesuada aliquet sapien. Нуллам аликвам Magna и Congue Sollicitudin. Сетка Ребенок 2
Идея состоит в том, чтобы горизонтальная прокрутка была только внизу зеленого поля. Я могу добавить прокрутку в контейнер, но при этом будет прокручиваться и содержимое желтого поля, а мне это не нужно.
Я также могу изменить структуру HTML и CSS и вместо этого использовать flex для достижения результата, но это добавит некоторые другие последствия для фактического решения, которое я создаю.
Просматривая Stackoverflow и Google, я смог найти только вопросы и решения для вертикальной прокрутки. Я пробовал применять те же идеи по установке определенной ширины к материалам, но после различных комбинаций мне не удалось найти ту, которая давала бы желаемый результат.
Версию скрипки можно найти здесь: https://jsfiddle.net/esantiagovieira/dkv06zmw/
