Row-Flexbox с вертикальной полосой прокрутки: цвет фона обрезается

Question

У меня есть боковая панель и основной контент, у каждого своя полоса прокрутки.Я пытаюсь добиться результата, когда красный фон основного содержимого всегда виден, независимо от того, прокручивается он или нет, и независимо от того, имеют ли flex-элементы больше высоты, чем их родительский элемент.Возможно ли это?

Моя текущая проблема заключается в том, что при попытке прокрутки фон основного элемента исчезает.Фон имеет точно такую ​​же высоту, что и тело, что не является целью.

Если я изменю align-items основного содержимого со значения по умолчанию stretch на flex-start, фон будет правильно расширяться длядлинные (по высоте) flex-элементы, но не для коротких.

Если я позволю этому растягиваться, я получу другую проблему, как вы можете видеть в следующем фрагменте: фон переходит кснизу (правильно) до прокрутки, в этом случае фон теряется.

Можно ли как-нибудь всегда иметь свой красный / оранжевый фон?

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

Я решил вернуться к этому, чтобы показать, как это можно сделать ни с 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 2

Похоже, это невозможно с flexbox . Я случайно заметил, что если контейнер является контейнером сетки (вместо flexbox ), он работает, если элементы сетки размещаются в ряд.

Используйте grid-auto-flow: column для контейнера grid сейчас, чтобы установить поля 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 3

Я вижу, что вы используете height:100% слишком много. Родительский гибкий контейнер не может расширяться по высоте, чтобы соответствовать содержимому, поскольку его высота ограничена высотой области просмотра, и, следовательно, содержимое выходит за пределы фона.

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