* { -moz-box-sizing:border-box;box-sizing:border-box; }
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.row {
height: 100%;
}
.row>.col {
overflow: auto;
height: 100%;
float: left;
width: 300px;
background: green;
}
.row .row>.col {
background: none;
overflow: visible;
height: auto;
width: 308px;
border-bottom: 0 none;
}
.row>.colWide { /* prefixed gradient angles are different from the final version of the standard */
background: -moz-linear-gradient(0deg,#fff 1px,red 1px,red 307px,#fff 307px,#fff 309px,orange 309px,orange 615px,#fff 615px,#fff 617px,red 617px,red 923px,#fff 923px,#fff 924px,transparent 924px);
background: -webkit-linear-gradient(0deg,#fff 1px,red 1px,red 307px,#fff 307px,#fff 309px,orange 309px,orange 615px,#fff 615px,#fff 617px,red 617px,red 923px,#fff 923px,#fff 924px,transparent 924px);
background: linear-gradient(90deg,#fff 1px,red 1px,red 307px,#fff 307px,#fff 309px,orange 309px,orange 615px,#fff 615px,#fff 617px,red 617px,red 923px,#fff 923px,#fff 924px,transparent 924px);
float: none;
width: auto;
}
.row>.colWide:after { /* to fake an even bottom border without further complicating the backgrounds */
content: '\a0';
display: block;
clear: both;
height: 0;
overflow: hidden;
border-bottom: solid 1px #fff;
width: 924px; /* set the width and border as desired */
}
.col {
border:solid 1px #fff;
}
.box {
width:300px;
height:300px;
border:solid 2px black;
margin:4px;
}
<div class="row">
<div class="col">
We consist of two divs: I serve as the sidebar, while my adjacent counterpart displays the main content. Each of us has our own scrollbar. However, my red sibling faces a background issue when you scroll...<br><br>
How can we resolve this?
<br><br><br>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
<div class="row col colWide">
<div class="col">
<div class="box">i am a box. The background behind me should be red.</div>
<div class="box">i am a box. The background behind me should be red.</div>
<div class="box">i am a box. The background behind me should be red.</div>
<div class="box">i am a box. The background behind me should be red.</div>
<div class="box">i am a box. The background behind me should be red.</div>
</div>
<div class="col">
<div class="box">i am a box. The background behind me should be orange.</div>
<div class="box">i am a box. The background behind me should be orange.</div>
<div class="box">i am a box. The background behind me should be orange.</div>
<div class="box">i am a box. The background behind me should be orange.</div>
<div class="box">i am a box. The background behind me should be orange.</div>
</div>
<div class="col">
<div class="box">i am a box. The background behind me should be red.</div>
<div class="box">i am a box. The background behind me should be red.</div>
</div>
</div>
</div>