javascript - 如何设置两个并排的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 容器是一个 Flexbox，特别是带有 flex-direction: column 的列布局，此列声明是导致文本溢出的原因我测试时 .right 容器的顶部。删除它并用 max-width 替换 .first 和 .second 的显式 width 后，看起来符合预期，容器 .first 和 .second 能够独立于其父容器 .right 滚动，而原始的两个容器仍然可以滚动。您还可以在 .first 或 .second 容器上设置显式高度，以控制其内容何时滚动。

.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>