Can't make overflow-x work in a full width flexbox column

Question

I'm trying to create a 2 column layout with flexbox. One is fixed width on the side and the other one (main column) fills the remaining space.

It was working until I put some contents wider than the screen with a overflow-x: scroll parent. Now this wide content is not limited by its scroller parent.

Here is the sample:

.container {
  display: flex;
}
.container .col-main {
  background: gold;
  flex: 1 1 100%;
}
.container .col-side {
  background: cornflowerblue;
  flex: 0 0 15em;
}

.slider-container {
  overflow-x: scroll;
}
.slider-container .slider {
  background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px);
  width: 150em;
  height: 10em;
}

<div class="container">
  <div class="col-main">

    <div class=slider-container>
      <div class="slider">
        Foo
      </div>
    </div>

  </div>
  <div class="col-side">
    Side
  </div>
</div>

It should be rendered like this:

Answer 1

Try adding min-width: 0; to the flex item.

.container .col-main {
  ...
  min-width: 0;
}

jsFiddle

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1. [CSS21]

Answer 2

You can add width: 0 to the container.

.container {
  display: flex;
}

.container .col-main {
  background: gold;
  flex: 1 1 100%;
  width: 0;
}

.container .col-side {
  background: cornflowerblue;
  flex: 0 0 15em;
}

.slider-container {
  overflow-x: scroll;
}

.slider-container .slider {
  background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px);
  width: 150em;
  height: 10em;
}

<div class="container">
  <div class="col-main">

    <div class=slider-container>
      <div class="slider">
        Foo
      </div>
    </div>

  </div>
  <div class="col-side">
    Side
  </div>
</div>