如何设置两个并排的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 中，我有第一个和第二个，它们不独立滚动。第一个比第二个长。当第二个内容结束时，它应该停止滚动，但它占据了第一个的高度。我不知道为什么。我试图让第一个在第二个停止时继续滚动。

.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

容器顶部的原因。删除它并用

width

替换

.first

和

.second

的显式

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 索引