How do you create a scrollable element inside of a flex container?

Question

I'm trying to make an app more mobile friendly but I can't figure out how create a scrollable element within another flex element. Here is the sample code I'm trying

.flex_container {
  display: flex;
  width: 100%;
  height: 100%;
}

.flex_item_left {
  width: 200px;
  background: lightgreen;
}

.flex_item_right {
  flex: 1;
  background: lightblue;
}

<div class="flex_container">
  <div class="flex_item_left">
    .....
  </div>
  <div class="flex_item_right">
    <div style="display:flex; overflow-x:scroll;">
      <div style="width:100px; margin:100px;">Test</div>
      <div style="width:100px; margin:100px;">Test2</div>
    </div>
  </div>
</div>

If I move the "flex_item_right" div out of the "flex_container" scrolling seems to work.

Like so

.flex_container {
  display: flex;
  width: 100%;
  height: 100%;
}

.flex_item_left {
  width: 200px;
  background: lightgreen;
}

.flex_item_right {
  flex: 1;
  background: lightblue;
}

<div class="flex_item_right">
 <div style="display:flex; overflow-x:scroll;">
    <div style="width:100px; margin:100px;">Test</div>
    <div style="width:100px; margin:100px;">Test2</div>
 </div>
  </div>
<div class="flex_container">
  <div class="flex_item_left">
.....
  </div>
</div>

Answer 1

there is many dupe but could not find the good one with all the nice explanations, i'll leave it to someone else ;) .

In short : you need either overflow:hidden or min-width:0 on the parent .

.flex_container {
  display: flex;
  width: 100%;
  height: 100%;

}

.flex_item_left {
  width: 200px;
  background: lightgreen;
}

.flex_item_right {
  flex: 1 ;
  min-width:0;
  background: lightblue;
}

<div class="flex_container">
  <div class="flex_item_left">
    .....
  </div>
  <div class="flex_item_right">
    <div style="display:flex; overflow-x:scroll;">
      <div style="width:100px; margin:100px;">Test</div>
      <div style="width:100px; margin:100px;">Test2</div>
    </div>
  </div>
</div>