Multiple background colors in scrollable flexbox

Question

I have flexbox( flex-direction: row) with 2 columns of content and a fixed height. I want the left and right columns to have a red and blue background respectively. If column overflows, a scrollbar appears flexbox(the overflowed part is still red / blue). If the height of the column contents is less than the height flexbox, the space below should 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>

Run codeHide result

---

EDIT

Methods that do not work:

• Setting align-items: stretch: the crowded part will be gray.
• position: absolute div, flexbox : div , .

Answer 1

, :

( IE - )

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

Hide result

Answer 2

display flex, . js . js, :

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

Hide result

Answer 3

, display: table; display: table-cell; . , , .

, table.

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

Hide result

Answer 4

div div, flex min-height: min-content div. 100% 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>

Hide result

Answer 5

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>

Hide result