可滚动可弯曲的多种背景颜色

I have a flexbox (flex-direction: row) with 2 columns of content and a fixed height. I want the left and right column to have a red and blue background respectively. If either of the columns overflow, the flexbox's scrollbar appears (the overflowed part is still red/blue). If a column's content height is less than the flexbox's height, the space below should still be red/blue.

我有一个有两栏内容和固定高度的弹性(弹性方向:行)。我希望左栏和右栏分别有红色和蓝色背景。如果任一列溢出，flexbox的滚动条就会出现(溢出部分仍然是红色/蓝色)。如果一个列的内容高度小于flexbox的高度，下面的空间仍然应该是红色/蓝色的。

Without using gradient colors or javascript, how can I achieve this effect?

不使用渐变颜色或javascript，如何实现这种效果?

Demo (I want the gray part to be blue):

演示(我希望灰色部分是蓝色的):

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  align-items: baseline;
}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}

<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>

---

EDIT

Methods that don't work:

不工作的方法:

• Setting align-items: stretch: overflowed part will be gray
• 设置对齐项:拉伸:溢出部分为灰色
• Add a position: absolute div that overlays the flexbox, solely for the background: this div will have the wrong width if the scrollbar is visible.
• 添加一个位置:覆盖flexbox的绝对div，仅用于背景:如果滚动条是可见的，那么这个div的宽度将会是错误的。

5 个解决方案

#1

When you fix height for parent and using display flex, the height of children is auto fit to height parent. So in this case, you need to use js to change the height of children. If you don't want to use js, you just do as bellow:

当您为父级设置高度并使用显示flex时，子级的高度将自动适合于父级高度。在这种情况下，你需要用js来改变子结点的高度。如果你不想用js，那就用bellow:

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
  
}
#left {
  background-color: red;
}
#right {
  background-color: blue;
}
#left, #right{
  display:table-cell;
  width:200px;
}

<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>

#2

I think it would be easier to use display: table; for your container, and display: table-cell; for your columns. The elements acting like tables, you can obtain the rendering you want.

我认为使用display: table会更容易;用于容器和显示:table-cell;为你的列。元素的作用类似于表，您可以获得您想要的呈现。

I had to add another container thought, due to the fact that you cannot limit the height of a table so easily.

我不得不添加另一个容器的想法，因为你不能如此轻易地限制一个表的高度。

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

.table {
  display: table;
  width: 100%;
}

#left {
  background-color: red;
}
#right {
  background-color: blue;
}

#left, #right {
  display: table-cell;
  width: 50%;
}

<div id="c1">
  <div class="table">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
  </div>
</div>

#3

Wrap left and right div with another div, set display flex and min-height:min-content for that div. also set height 100% for left and right div.

用另一个div包装左div和右div，设置显示flex和min-height:min-content for that div。

    #c1 {
      background-color: gray;
      display: flex;
      height: 200px;
      overflow-y: auto;
    }

#wrap{
  display:flex;
  width:100%;
  min-height:min-content;
}
#left {
  flex: 1;
  background-color: red;
  height:100%;
}
#right {
  flex: 1;
  background-color: blue;
  height:100%;
}

   

 <div id="c1">
      <div id='wrap'>
        <div id="left">
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
        </div>
        <div id="right">
          <div>line</div>
        </div>
       </div>
    </div>

#4

Working from Nithin Charly's answer, I got this:

根据尼辛·查理的回答，我得到了这个:

(doesn't work properly in IE due to bugs)

(IE因bug无法正常工作)

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

#wrap {
  display: flex;
  min-height: 100%;
  align-items: stretch;
}

#left {
  flex: 1;
  background-color: red;
}

#right {
  flex: 1;
  background-color: blue;
}

<div id="c1">
  <div id="wrap">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
  </div>
</div>

#5

The problem is with align-items: baseline. You can just leave that out or replace it with stretch and you'll get what you're after.

问题是align-items: baseline。你可以把它放出来，或者用拉伸来代替它，然后你就会得到你想要的。

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  /* align-items: baseline; */

}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}

<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>