title: Viewport is changing zoom when Flexbox container is running out of space
body: <p>My page starts to change zoom and layout gets slightly messed up when I have a hardcoded width on items located in a Flexbox container (make a very narrow Chrome Devtools responsive window). The problem starts when I make my viewing area narrower than the 300px. Unfortunately, you can't see this problem when running this inside an iframe on jsfiddle - it has to be ran "on it's own", my html block needs to be THE top html block.</p>
  
  <p>Here's the jsfiddle for reference still:</p>
  
  <p><a href="https://jsfiddle.net/elijahww/9e1u7ptr/" rel="nofollow noreferrer">https://jsfiddle.net/elijahww/9e1u7ptr/</a></p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;style&gt;
          #productShowcaseContainer {
              display: flex;
              flex-direction: column;
              height: 100vh;
              width: 100vw;
          }
  
          .contentContainer {
              display: flex;
              flex: 1;
          }
  
          #productShowcaseTitle {
              height: 100px;
              background-color: antiquewhite;
          }
  
  
          #productShowcaseThumbnailContainer {
              flex: 1;
              background-color: darkseagreen;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="margin: 0;"&gt;
  &lt;div id="productShowcaseContainer"&gt;
      &lt;div id="productShowcaseTitle"&gt;&lt;/div&gt;
  
      &lt;div class="contentContainer"&gt;
          &lt;div id="productShowcaseThumbnailContainer" style="padding: 10px;"&gt;
              &lt;input style="width:300px;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I don't know how to make this work.</p>
  
  <p>here is a gif:
  <a href="https://i.stack.imgur.com/zt0Nz.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zt0Nz.gif" alt="enter image description here"></a></p>