title: How do I prevent a table from extending past its containers height
body: <p>I have a table and whenever there are too many rows it goes off the bottom of the page and exceeds its containers height.
  <a href="https://i.stack.imgur.com/Yfs0V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yfs0V.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;body&gt;
    &lt;div class=&quot;myContainer&quot;&gt;
      &lt;table class=&quot;scrolldown&quot;&gt;
  
        &lt;!-- Table head content --&gt;
        &lt;thead class=&quot;test1&quot;&gt;
          &lt;tr&gt;
            &lt;th&gt;Heading 1&lt;/th&gt;
            &lt;th&gt;Heading 2&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
  
        &lt;!-- Table body content --&gt;
        &lt;tbody class=&quot;test2&quot;&gt;
          &lt;tr&gt;
            &lt;td&gt;Content&lt;/td&gt;
            &lt;td&gt;Content&lt;/td&gt;
          &lt;/tr&gt;...
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.myContainer {
    outline-style: solid;
    outline-color: #c7d2fe;
    height: 100px
  }
  tbody td,
  thead th {
    width: 200px;
    border-right: 2px solid black;
  }
  td {
    text-align: center;
  }
  </code></pre>
  <p>How can I make it so that the table becomes scrollable once it would extend past its containers height?</p>
  <p><a href="https://jsfiddle.net/9j2epto7/47/" rel="nofollow noreferrer">Fiddle</a></p>