¿Cómo evitar que un niño de ancho dinámico flexbox desborde al padre?

En el ejemplo a continuación, quiero evitar que el niño estirado desborde al padre. No quiero especificar un ancho para ello. ¿Cómo puedo lograr eso?

#flex-parent { display: flex; width: 200px; background: green; padding: 10px; }
#fixed-child { width: 20; background: red }
#stretched-child { background: yellow; word-wrap: break-word }
<div id="flex-parent">
  <div id="fixed-child">
FIXED
  </div>
  <div id="stretched-child">
  STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta