title: Flex-wrap not working when placed onto parent element
body: <p>I'm making a bio page and am looking to have a layout where 40% of the container will be placed in a fixed position on the left side of the screen. While having 60% of the main-content directly to the right of it where I can have it freely scroll when additional content is placed.</p>
  <p>My problem is, before I start adding anything else onto my code, I was hoping to finish the layout first and have it be responsive. However, when I resize the window smaller, the flex-wrap doesn't work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    background-color: #252422;
    color: #fffcf2;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  #main-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .left-container {
    background-color: #eb5e28;
    height: 100%;
    width: 40%;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
  }
  
  .content-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 150vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="main-container"&gt;
  
      &lt;header class="left-container"&gt;
        &lt;div&gt;header&lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section class="content-container"&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
        &lt;h1&gt;main&lt;/h1&gt;
  
      &lt;/section&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>