如何滚动div中的内容，而不滚动父容器？

Question

我有一个基于网格的布局，在容器（aside）内有两列（section和main）。每列应分别可滚动，但容器根本不可滚动。两列的高度都是动态的，但是容器的高度是固定的。 我已经尝试了两种方法在父容器上使用溢出-y：

1. 使用overflow-y: scroll但....当我在子div之一（例如{aside）中完成滚动时，整个容器（main）开始滚动我不想要的内容。
2. 使用overflow-y: hidden但....然后，可滚动子div中的内容被剪切，例如 这里： cut content inside child scrollable divs when parent has overflow-y to hidden

我也对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。

Answer 1

如果您不希望外部容器滚动并保持固定高度，那么绝对不能获得aside和section部分的完整内容。更好的选择是让他们继承容器的高度，并在容器上设置overflow-y: hidden：

main {
  display: grid;
  grid-template-columns: 336px 2fr;
  overflow-y: hidden;
  /*hidden cuts my content */
  height: 300px;
}

section, aside{ height: 100%; }
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>