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

Моя текущая проблема заключается в том, что когда я пытаюсь прокрутить, фон основного 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>
1
Alkis Mavridis 2 Май 2019 в 18:22

3 ответа

Лучший ответ

Похоже, это невозможно с flexbox . Я случайно заметил, что если контейнер является контейнером сетки (вместо 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>
1
kukkuz 2 Май 2019 в 15:48

Я решил вернуться к этому, чтобы показать, как это можно сделать ни с 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>
1
Kravimir 7 Май 2019 в 02:26

Я вижу, что вы используете 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>
0
Adriano 3 Май 2019 в 04:40