Multiple background colors in scrollable flexbox

问题

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.

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

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.

回答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:

#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.

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.

    #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)

#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.

#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>

来源：https://stackoverflow.com/questions/44274225/multiple-background-colors-in-scrollable-flexbox

标签

html

css

css3

flexbox