How to keep a tables height contained within a parent div
<p>I cannot figure out how to keep this tables height contained within the containing div. My goal is to be able to scroll in order to see it all. There are plenty of solutions to solve this when dealing with the width, but I have not been able to get them working with the height. </p>

<pre><code>&lt;html&gt;

&lt;head&gt;
    &lt;style&gt;
        .container {
            border: 1px solid black;
            height: 100px;
        }

        td {
            font-size: 40px;
        }

        table {
            table-layout: fixed;
            height: 100%;
            overflow-y: scroll;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;table&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;
                        header
                    &lt;/th&gt;
                    &lt;th&gt;
                        header
                    &lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                    &lt;td&gt;
                        data
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><a href="https://jsfiddle.net/meeow314159/3vs9bmsf/" rel="nofollow">https://jsfiddle.net/meeow314159/3vs9bmsf/</a></p>