[英]How do I set two div which are side by side to scroll independently?
I have one main parent div.我有一个主要的父 div。 Within that there are two divs, left and right.
其中有两个div,左和右。 I was able to make the left and right div scroll independently.
我能够使左右 div 独立滚动。 However, within the right div, there are again two divs (1 and 2).
但是,在右侧 div 中,又有两个 div(1 和 2)。 I am trying to make 1 and 2 scroll independently.
我正在尝试使 1 和 2 独立滚动。 The scroll is happening within the entire right div of the main parent.
滚动发生在主父级的整个右 div 内。 I am not sure of what is wrong and why the 2 is taking up the whole height of the right div, while it should take only the height of its content.
我不确定出了什么问题以及为什么 2 占据了正确 div 的整个高度,而它应该只占据其内容的高度。 Here, 1 is longer than 2 and should scroll even when 2 stops.
在这里,1 比 2 长,即使 2 停止也应该滚动。 I have attached the css for all the divs below.
我已经为下面的所有 div 附加了 css。
Main div is the parent of all divs主 div 是所有 div 的父级
.main{
display: flex;
font-family: 'Rubik', sans-serif;
font-size: 20px;
width: 100vw;
height: 100%;
background: #f7f7f7;
}
Within main div I have left and right div, which are scrolling independently在主 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;
}
Within the right div, I have first and second which are not scrolling independently.在正确的 div 中,我有第一个和第二个不是独立滚动的。 First is longer than Second.
第一个比第二个长。 Second should stop scrolling when its content is over, but it is taking the height of first.
当它的内容结束时,第二个应该停止滚动,但它的高度是第一个。 I am not sure why.
我不确定为什么。 I am trying to make first keep on scrolling when second stops.
我试图在第二次停止时首先继续滚动。
.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;
}
Can anyone please help me figure out what is wrong with this?谁能帮我弄清楚这有什么问题? thank you
谢谢你
.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>
Try changing the position to relative and then also try adding the z-index尝试将 position 更改为相对,然后尝试添加 z-index
You had the two child containers .left
and .right
scrolling vertically on overflow correctly but the two nested divs in the right container were not scrolling independently of the parent .right
.您有两个子容器
.left
和.right
在溢出时正确垂直滚动,但右容器中的两个嵌套 div 没有独立于父.right
滚动。 To fix that, we can add overflow: auto
to both .first
and .second
and then to align them side by side in a row format give the .right
container display: flex
.为了解决这个问题,我们可以将
overflow: auto
添加到.second
.first
然后以行格式并排对齐它们,给.right
容器display: flex
。
Also, the .first
container was a flexbox and specifically a column layout with flex-direction: column
, this column declaration is what was causing the text to overflow out the top of the .right
container when I was testing.此外, .first 容器是
.first
,特别是带有flex-direction: column
的列布局,当我测试时,此列声明是导致文本溢出.right
容器顶部的原因。 After removing that and replacing the explicit width
's for .first
and .second
with max-width
, things are looking as expected and the containers.first and.second are able to be scrolled independently of their parent .right
while the original two containers are still scrollable too.在删除它并将
.second
.first
显式width
替换为max-width
之后,事情看起来像预期的那样,并且 containers.first 和 .second 能够独立于它们的父.right
滚动,而原来的两个容器仍然可以滚动。 You can also set an explicit height
on the.first or.second containers to control when their content should scroll.您还可以在 the.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.