У меня есть сетка с двумя столбцами (aside и section) внутри контейнера (main). Каждый столбец должен прокручиваться отдельно, но контейнер вообще не должен прокручиваться. Высоты обоих столбцов являются динамическими c, но контейнер имеет фиксированную высоту. Я пробовал два подхода с overflow-y на родительском контейнере:
- с
overflow-y: scroll но .... Когда я заканчиваю sh прокрутку внутри одного из дочерних элементов, например (aside) весь контейнер (main) начинает прокручивать то, что мне не нужно. - С помощью
overflow-y: hidden но .... затем содержимое внутри прокручиваемых дочерних элементов div обрезается, как показано здесь: вырезать содержимое внутри дочерних прокручиваемых элементов div, когда у родительского элемента переполнение-y скрыто
Я тоже устал от свойства overscroll-behaviour, но, похоже, оно не работает, я понятия не имею, почему.
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: scroll;
/*hidden cuts my content */
max-height: 400px;
}
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
Вот фрагмент для этого случая: https://jsfiddle.net/Lgeayx4u/3/
Можно ли делать то, что я хочу с чистым CSS? Я хотел бы избежать JS.