我有一个侧边栏和一个主要内容，每个都有自己的滚动条。 我尝试实现一个结果，即主要内容的红色背景始终可见，无论是否滚动，也无论弹性项目是否比其父项目高。 这可能吗？
我目前的问题是，当我尝试滚动时，主div的背景消失了。背景的高度与身体完全相同，这不是目标。
如果我将主要内容的align-items从默认stretch更改为flex-start，则长(高度)弹性项目的背景可以正确扩展，但短项目的背景不会正确扩展。
如果我让它拉伸，我会遇到另一个问题，如以下代码片段所示：背景会下降(正确)，直到滚动，在这种情况下，背景会丢失。
我可以以某种方式始终拥有我的红色/橙色背景吗？
* { box-sizing:border-box; }
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.flex-item {
background-color:red;
border:solid 1px white;
}
.box {
width:300px;
height:300px;
border:solid 2px black;
margin:4px;
}
.orange {
background:orange;
}<div style="display:flex; height:100%;">
<div style="flex:0 0 300px; background-color:green; height:100%; overflow:auto;">
We are two divs, I am the sidebar and the one next to me is the main content. Each of us has its own scrollbar. But my red brother has an issue with his background if you scroll...<br><br>
How could we solve that?
<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 style="display:flex; overflow:auto; height:100%;">
<div class="flex-item">
<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="flex-item orange">
<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="flex-item">
<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>看起来这在弹性框中是不可能的。我碰巧注意到，如果容器是网格容器(而不是弹性框)，如果网格项放在一行中，它可以工作。
现在使用网格容器上的grid-auto-flow: column将flex-item框设置为具有适当背景的连续 - 请参阅下面的演示：
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.flex-container { /* added */
display: grid;
grid-auto-flow: column;
overflow: auto;
}
.flex-item {
background-color: red;
border: solid 1px white;
}
.box {
width: 300px;
height: 300px;
border: solid 2px black;
margin: 4px;
}
.orange {
background: orange;
}<div style="display:flex; height:100%;">
<div style="flex:0 0 300px; background-color:green; height:100%; overflow:auto;">
We are two divs, I am the sidebar and the one next to me is the main content. Each of us has its own scrollbar. But my red brother has an issue with his background if you scroll...<br><br> How could we solve that?
<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="flex-container">
<div class="flex-item">
<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="flex-item orange">
<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="flex-item">
<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>我决定回到这个问题，以展示如何在Flex和Grid上完成它。(我没有让它响应，所以在查看代码结果时一定要点击"整页"链接。
* { -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 are two divs, I am the sidebar and the one next to me is the main content. Each of us has its own scrollbar. But my red brother has an issue with his background if you scroll...<br><br>
How could we solve that?
<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>我的看法是你用height:100%太多了。父 flex 容器无法扩展高度以适应内容，因为其高度仅限于视区高度，因此内容超出背景的末尾。
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.flex-row {
display: flex;
min-height: 100%;
align-content: stretch;
}
.flex-row .flex-row {
overflow: auto;
}
.flex-item {
background-color: red;
border: solid 1px white;
}
.box {
width: 300px;
height: 300px;
border: solid 2px black;
margin: 4px;
}
.orange {
background: orange;
}<div class="flex-row">
<div style="flex:0 0 300px; background-color:green; overflow:auto;">
We are two divs, I am the sidebar and the one next to me is the main content. Each of us has its own scrollbar. But my red brother has an issue with his background if you scroll...<br><br> How could we solve that?
<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="flex-row">
<div class="flex-item">
<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="flex-item orange">
<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="flex-item">
<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>