带有垂直滚动条的 Row-Flexbox：背景颜色被剪切

Question

我有一个侧栏和一个主要内容，每个都有自己的滚动条。 我试图实现一个结果，即主要内容的红色背景始终可见，无论是否滚动，也无论弹性项目的高度是否高于其父项。 这可能吗？

我目前的问题是，当我尝试滚动时，主 div 的背景消失了。背景与主体高度完全相同，这不是目标。

如果我将主要内容的align-items 从默认的stretch 更改为flex-start，则背景会正确扩展为长（高）弹性项目，但不适用于短弹性项目。

如果我让它伸展，我会遇到另一个问题，正如您在下面的 sn-p 中看到的那样：背景一直到底部（正确）直到滚动，在这种情况下背景会丢失。

我可以以某种方式始终拥有我的红色/橙色背景吗？

* { 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>

Answer 1

看起来这对于 flexbox 是不可能的。我碰巧注意到，如果容器是 grid 容器（而不是 flexbox），那么如果将网格项放在一行中，它就会起作用。

现在在网格容器上使用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>

Answer 2

我决定回到这一点来展示如何既不使用 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>

Answer 3

我的看法是你使用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>