CSS Grid с переполнением только в одной из строк
Я не уверен, возможно ли это с помощью CSS Display Grid, но мне бы хотелось, чтобы одна строка моей сетки имела вертикальное переполнение, а другая — нет.
.container {
box-sizing: border-box;
height: 350px;
max-width: 300px;
border: 3px dotted gray;
overflow: hidden;
display: grid;
grid-template-areas: 'item-a' 'item-b';
grid-template-rows: 1fr 120px;
grid-template-columns: 200px;
background-color: grey;
.item-a {
grid-area: item-a;
border: 3px dotted green;
overflow-x: auto;
overflow-y: hidden;
width: 600px;
background-color: green;
}
.item-b {
grid-area: item-b;
border: 3px dotted yellow;
background-color: yellow;
}
}<div class = "container">
<div class = "item-a">
Grid child 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis
suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent
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. Nullam aliquam
magna at congue sollicitudin.
</div>
<div class = "item-b">
Grid Child 2
</div>
</div>Идея состоит в том, чтобы горизонтальная прокрутка была только внизу зеленого поля. Я могу добавить прокрутку в контейнер, но при этом будет прокручиваться и содержимое желтого поля, а мне это не нужно.
Я также могу изменить структуру своего HTML и CSS и вместо этого использовать flex для достижения результата, но это добавит некоторые другие последствия для фактического решения, которое я создаю.
Просматривая Stackoverflow и Google, я смог найти только вопросы и решения для вертикальной прокрутки. Я пробовал применять те же идеи по установке определенной ширины к материалам, но после разных комбинаций не смог найти ту, которая давала бы желаемый результат.
Версию скрипки можно найти здесь: https://jsfiddle.net/esantiagovieira/dkv06zmw/
Ответы 2
У меня есть решение, что вы пытаетесь сделать.
.container{
box-sizing: border-box;
height: 350px;
max-width: 300px;
border: 3px dotted gray;
overflow: hidden;
display: grid;
grid-template-areas:
'item-a'
'item-b';
grid-template-rows: 1fr 120px;
grid-template-columns: 200px;
background-color: grey;
.item-a{
grid-area: item-a;
border: 3px dotted green;
overflow-x: scroll;
overflow-y: hidden;
width:600px;
background-color: green;
}
.item-a >div{
width: 800px;
}
.item-b{
grid-area: item-b;
border: 3px dotted yellow;
background-color: yellow;
}
}<div class = "container">
<div class = "item-a">
<div>
Grid child 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent 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. Nullam aliquam magna at congue sollicitudin.
</div>
</div>
<div class = "item-b">
Grid Child 2
</div>
</div>Вы пытаетесь выполнить горизонтальную прокрутку зеленого поля.
Я думаю, это может сработать
Я проголосовал за ваше решение, поскольку оно работает, но я проголосовал за решение, приведенное ниже, поскольку в нем было объяснение, почему оно работает. Тем не менее, огромное вам спасибо!
В вашем примере это не сработает, поскольку элементы по умолчанию имеют значение text-wrap, равное wrap. Таким образом, тексты в вашем div будут завершены. Вот почему в вашем зеленом элементе div нет горизонтальной полосы прокрутки.
Чтобы решить вашу проблему, вам нужно добавить атрибут CSS text-wrap: nowrap в стиль вашего .item-a класса.
Кроме того, ваш код уже работает, если у вас есть элемент блочного типа внутри item-a div, ширина которого больше его. Я думаю, вы сможете лучше понять это, если показать пример. Итак, вот модифицированный пример вашего кода:
.container{
box-sizing: border-box;
height: 350px;
max-width: 300px;
border: 3px dotted gray;
overflow: hidden;
display: grid;
grid-template-areas:
'item-a'
'item-b';
grid-template-rows: 1fr 120px;
grid-template-columns: 200px;
background-color: grey;
}
.item-a{
grid-area: item-a;
border: 3px dotted green;
overflow-x: auto;
overflow-y: hidden;
width: 600px;
background-color: green;
}
.child-block-elem {
background-color: pink;
width: 1000px;
display: block;
}
.item-b{
grid-area: item-b;
border: 3px dotted yellow;
background-color: yellow;
}<div class = "container">
<div class = "item-a">
Grid child 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent 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. Nullam aliquam magna at congue sollicitudin.
<div class = "child-block-elem">A child block element</div>
</div>
<div class = "item-b">
Grid Child 2
</div>
</div>В моем примере я использовал существующий код, добавив новый дочерний блок внутри зеленого div вместе с соответствующими стилями. Однако оставшийся код принадлежит вам. Это демонстрирует, что ваш существующий код работает так, как задумано; единственная проблема — это перенос текстового содержимого в зеленый цвет div и отсутствие дополнительного контента, который заставит его расширяться за пределы ширины родительского элемента.
Надеюсь, это поможет!
Ваше решение действительно сработало. Я также использовал универсальный селектор от @Faisal Ahmed, поэтому мне не нужно добавлять еще один элемент div в свой HTML.
Также объясните, почему нет горизонтальной прокрутки. Совместное использование кода — это здорово, но если в нем не хватает информации, это вообще не очень полезно.