Kontener flex wierszowy i wchodzenie jego na prawy margines wewnętrzny div'a.

Jak zrobić, by kontener flex wierszowy nie wchodził na prawy margines wewnętrzny div'a? A oto przykładowy kod tego problemu:

<div style="padding:10px;overflow:auto;width:150px; background-color: yellow;">
   <div style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;">
     <div style="flex:1 0 auto; background-color:red">div - 1</div>
    <div style="flex:1 0 auto; background-color:blue">div - 2</div>
   </div>
</div>

<div style="padding:10px;overflow:auto;width:200px; background-color: yellow;">
  <div style="display:flex;flex-direction:row;border: 1px solid lightgrey;width:200px;height:100px;">
    <div style="flex:1 0 auto; background-color:red; max-width:100px; overflow:hidden;">div - 1</div>
    <div style="flex:1 0 auto; background-color:blue; max-width:100px; overflow:hidden;">div - 2</div>
  </div>
</div>