Question

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

我当前的问题是，当我尝试滚动时，主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>

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>

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

3 个答案: