我有一个主要的父 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>您有两个子容器.left并.right在溢出时正确垂直滚动，但右侧容器中的两个嵌套 div 并未独立于父容器滚动.right。为了解决这个问题，我们可以添加overflow: auto到两.first和.second，然后对准并排他们边一排格式给.right容器display: flex。
此外，.first容器是一个 flexbox，特别是一个带有 的列布局flex-direction: column，这个列声明是.right我测试时导致文本溢出容器顶部的原因。在删除它并替换显式width的 for.first和.secondwith 之后max-width，事情看起来像预期的那样，容器 .first 和 .second 能够独立于它们的父.right容器滚动，而原来的两个容器仍然可以滚动。您还可以height在 .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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句