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.