如何设置两个并排的div独立滚动？

Question

我有一个主要的父 div。其中有两个div，左和右。我能够使左右 div 独立滚动。但是，在右侧 div 中，又有两个 div（1 和 2）。我正在尝试使 1 和 2 独立滚动。滚动发生在主父级的整个右 div 内。我不确定出了什么问题以及为什么 2 占据了正确 div 的整个高度，而它应该只占据其内容的高度。在这里，1 比 2 长，即使 2 停止也应该滚动。我已经为下面的所有 div 附加了 css。

主 div 是所有 div 的父级

.main{
    display: flex;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    width: 100vw;
    height: 100%;
    background: #f7f7f7;
}

在主 div 中，我有左右 div，它们独立滚动

.left{
    flex-grow: 1;
    height: 90vh;
    position: static;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.right{
    flex-grow: 1;
    height: 90vh;
    position: static;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

在右侧的 div 中，我有第一个和第二个不是独立滚动的。第一个比第二个长。 Second 应该在其内容结束时停止滚动，但它的高度是 first。我不确定为什么。当第二个停止时，我试图让第一个继续滚动。

.first{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 900px;
    flex: 1 1;
}

.second{
    width: 467px;
    background-color: #2b2f3e;
    flex: none;
}

谁能帮我弄清楚这有什么问题？谢谢

.main {
  display: flex;
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  width: 100vw;
  height: 100%;
  background: #f7f7f7;
}

.left {
  flex-grow: 1;
  height: 90vh;
  position: static;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: blue;
}

.right {
  flex-grow: 1;
  height: 90vh;
  position: static;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 900px;
  flex: 1 1;
  background-color: yellow;
}

.second {
  width: 467px;
  background-color: #2b2f3e;
  flex: none;
}

<div class="main">
  <div class="left">
    <h1>Left</h1>
    <p>Data</p>
  </div>
  <div class="right">
    <h1>Right</h1>
    <div class="first">
      <h2>First</h2>
      <p>Data</p>
    </div>
    <div class="second">
      <h2>Second</h2>
      <p>Data</p>
    </div>
  </div>
</div>

Answer 1

您有两个子容器 .left 和 .right 在溢出时正确垂直滚动，但右侧容器中的两个嵌套 div 没有独立于父容器 .right 滚动。为了解决这个问题，我们可以将overflow: auto 添加到.first 和.second 中，然后将它们并排排列成一行给.right 容器display: flex。

另外，.first 容器是一个弹性框，特别是带有flex-direction: column 的列布局，当我测试时，这个列声明是导致文本溢出.right 容器顶部的原因。在删除它并将.first 和.second 的显式width 替换为max-width 之后，事情看起来像预期的那样，容器.first 和.second 能够独立于它们的父级.right 滚动而原来的两个容器仍然可以滚动。您还可以在 .first 或 .second 容器上设置显式 height 以控制其内容何时滚动。

.main{
    display: flex;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    width: auto;
    height: 100%;
    background: #f7f7f7;
    margin: 0 auto;
    overflow: auto;
}

.left{
    flex-grow: 1;
    height: 90vh;
    position: relative;
    max-width: 20ch; /* Remove this, just for demo */
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.right{
    flex-grow: 1;
    display: flex;
    height: 90vh;
    position: relative;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.first{
    display: flex;
    flex-direction: column;
    max-width: 900px;
    overflow: auto;
}

.second{
    max-width: 467px;
    background-color: #2b2f3e;
    overflow: auto;
}

<div class="main">
   <div class="left">
     <p>Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text</p>
   </div>
   <div class="right">
     <div class="first"><p>Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text<p><p>Some other text</p></div>
     <div class="second">Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text</div>
   </div>
</div>

Answer 2

尝试将位置更改为相对位置，然后尝试添加 z-index