how to prevent flex item overflow flex box?

Question

The inner-right element will overflow the flex box, and the outer-left element will hide.

How can I prevent the inner-right and outer-right element overflow

Presenting code in runnable snippet here

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 300px;
}

* {
  box-sizing: border-box;
  height: 100%;
}

.flex-outer {
  display: flex;
  width: 100%;
}

.flex-inner {
  display: flex;
}

.outer-left {
  width: 100px;
  background: #eee;
}

.outer-right {
  flex: 1;
  background: #ddd;
  white-space: nowrap;
}

.inner-left {
  width: 100px;
  background: #ccc;
}

.inner-right {
  flex: 1;
  background: #aaa;
}

<div class="container">
  <div class="flex-outer">
    <div class="outer-left"></div>
    <div class="outer-right flex-inner">
      <div class="inner-left"></div>
      <div class="inner-right">the content will overflow the container, inner-right width expect to be 100px, but actually not</div>
    </div>
  </div>
</div>

and why flex: 1 didn`t work