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

我有一个主要的父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和右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{
显示器：flex；
字体系列：“Rubik”，无衬线；
字体大小：20px；
宽度：100vw；
身高：100%；
背景：#f7f7f7；
}
.左{
柔性生长：1；
高度：90vh；
位置：静态；
排名：0；
溢出y：自动；
溢出x：隐藏；
背景颜色：蓝色；
}
.对{
柔性生长：1；
高度：90vh；
位置：静态；
排名：0；
溢出y：自动；
溢出x：隐藏；
}
.首先{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
宽度：900px；
弹性：1；
背景颜色：黄色；
}
.第二{
宽度：467px；
背景色：#2b2f3e；
flex：无；
}

左边
资料

赖特
弗斯特
资料

第二
资料

尝试将位置更改为相对，然后再尝试添加z索引您有两个子容器

。left

和

。right

在溢出时正确地垂直滚动，但右侧容器中的两个嵌套div没有独立于父容器

。right

滚动。为了解决这个问题，我们可以在

和
中添加
溢出：auto
。首先
和
。第二个
，然后以行格式将它们并排对齐，给出
。右
容器
显示：flex

另外，
.first
容器是一个flexbox，特别是一个列布局，带有
flex direction:column
，这个列声明是我测试时导致文本溢出
.right
容器顶部的原因。删除该选项并将
.first
和
.second
的显式
width
替换为
max width
后，事情看起来与预期一样，容器也可以滚动。first和.second可以独立于其父级
进行滚动。对
，而原来的两个容器仍然可以滚动。您还可以在.first或.second容器上设置显式的
高度
，以控制其内容何时滚动


.main{
显示器：flex；
字体系列：“Rubik”，无衬线；
字体大小：20px；
宽度：自动；
身高：100%；
背景：#f7f7f7；
保证金：0自动；
溢出：自动；
}
.左{
柔性生长：1；
高度：90vh；
位置：相对位置；
最大宽度：20ch；/*删除此项，仅用于演示*/
排名：0；
溢出y：自动；
溢出x：隐藏；
边框：1px实心#000；
}
.对{
柔性生长：1；
显示器：flex；
高度：90vh；
位置：相对位置；
排名：0；
溢出y：自动；
溢出x：隐藏；
边框：1px实心#000；
}
.首先{
显示器：flex；
弯曲方向：立柱；
最大宽度：900px；
溢出：自动；
}
.第二{
最大宽度：467px；
背景色：#2b2f3e；
溢出：自动；
}

一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字

一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些其他文本

一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本一些非常长的文本文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字有些很长的文字
.1
和
.2
是CSS类的无效选择器，如所述。如果您仍然想使用它们，您可以编写
[class=“1”]
和
[class=“2”]
@Reyno是的，我刚刚编写了它，为了更简单地解释问题，请单击，然后创建一个
[]
代码段编辑器，当然，如果您转到并获取一些数据来显示这确实是一个注释，而不是一个答案，效果会更好。再重复一点，。我不确定我是否能够理解您给出的答案显示您的html代码，我将进行测试抱歉，想发表评论，但我无法：（我添加了它。@兄弟，这有助于解决您的问题吗？我有点需要。我需要