如何使用 css 独立滚动两个 div

Question

I have a page layout at the link below. when i scroll the inner-window area both the divs are scrolling..

Link to code

I want two divs(first-column, second-column) inside inner-window to scroll independently. And disable scroll if the content is within the view port height. Is that possible to do with just CSS?

Answer 1

I haven't tried it out, but I'd try setting overflow-y: scroll in the CSS file for each div. That should automatically add scroll functionality when the content height exceeds the div height (assuming you have a fixed height set). If it doesn't work, feel free to let me know. Good luck!

Answer 2

Add scroll to independent class and also you have to set at what max height you want the content to have scroll, for the example below I have used 400px as the height, post that height you will have scroll.

Bonus tip

When using flex for direction, flex-direction:row; is default you no need to specifically use that.

 .fixed-box { position: fixed; width: 100%; }.sticky-header { position: fixed; }.inner-window { border: 1px solid red; display: flex; flex-direction: row; }.first-column { overflow-y: auto; height: 400px; }.second-column { overflow-y: auto; height: 400px; }

 <div class="row h-100"> <div class="col-3"> <div class="col-9 bg-warning h-100 right-window"> <div class="inner-window"> <div class="first-column"> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> <p>This is first column</p> </div> <div style="background: green" class="second-column"> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> <p>This is second column</p> </div> </div> </div> </div>