title: Content spilling out of fixed container
body: <p>I have looked around for answers to this problem, and none seem to work for my case. So here it is.</p>
  
  <p>I have a modal, whose position is set to fixed. The problem is that the content gets pushed outside of its container. The contents of <code>.content</code> go outside of <code>.modal-container</code></p>
  
  <p>A temporary fix I've found is by adding a huge margin-top to the <code>h1</code>, but this isn't satisfactory because I know I'm missing something.</p>
  
  <p>EDIT: forgot to mention that <code>overflow: scroll</code> and <code>overflow: auto</code> isn't working at any level of <code>div</code>.</p>
  
  <p>SOLUTION: Thanks Zohir. This is the updated content class to help others who have the same problem:</p>
  
  <pre><code>.content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: 100%;
      max-width: 100%;
      overflow: auto;
   }
  </code></pre>
  
  <p>The parent's position is of course set to <code>relative</code>.</p>
  
  <p>ORIGINAL CODE:</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>.modal-container {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  
  .modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90vw;
    height: 90vh;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=“modal-container”&gt;
    &lt;div class=“modal-content”&gt;
      &lt;div class=“content”&gt;
        &lt;h1&gt;&lt;/h1&gt;
        &lt;form&gt;&lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>