title: Keep flex items inside parent container
body: <p>I'm trying to create an element that will hold various images that should be responsive (width AND height). So far using flexbox has been successful except for one thing. Every time I reduce the width of my window, at a certain point, the flex items overflow the parent container and spill out beyond the containers width. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
      position: fixed;
      top: 0;
      left: 0;
      height: 80px;
      line-height: 80px;
      background: black;
      color: #fff;
      width: 100%;
      text-align: center;
  }
  body, p {
      margin: 0;
      padding: 0;
      width: 100vw;
  }
  .wrapper {
      height: 100vh;
      margin: 100px auto;
      min-width: 0;
  }
  .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      max-width: 100%;
      min-width: 200px;
      flex-wrap: nowrap;
  }
  img {
      max-height: 100%;
      max-width: 100%;
  }
  .txt-rt {
      text-align: right;
  }
  .footer {
      background: darkgray;
      height: 300px;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;This is a Navbar&lt;/nav&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="flex"&gt;
          &lt;p&gt;hello&lt;/p&gt;
          &lt;img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""&gt;
          &lt;p class="txt-rt"&gt;world&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
      &lt;h3 class="footer"&gt;Footer content&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In <a href="https://codepen.io/hintonbradley/pen/bGGBJJp" rel="nofollow noreferrer">this CodePen example</a>, each time the window width is &lt;560px or so and the height is at least 600px, the image is no longer responsive in width and the content overflows outside the screen.</p>
  
  <p>All the other functionality looks like it's working as expected, but once I reduce my window width to a certain point the image will not shrink down. This prevents all 3 flex items being viewable in the width of the screen.  Is there code I should be adding - not media queries since various sizes of images will be used - to make sure the image is responsive no matter the size of the window? Note: I don't want the items to wrap down to a second line.</p>