How to keep table confined with in outer fieldset without hard-coding height in pixels

Question

My html page has a fieldset and inside that div I am rendering a table on the fly. This table can have just 1 row or 1000 row.

Outer Div's height is 75% and I do not want table to go pass through that.

The HTML code looks like this

<fieldset>
    <div>Some text and some HTML Elements </div>
    <<h4>Field Permissions </h4>
    <table class="mytable">
        // Dynamically populate rows. Number of rows can be 1 or 100 or 1000
    </table>
</fieldset>

Now, I wish to keep this table within outer field set but it renders past across the field set.

In the attached image, DOM element with red border is the table and with blue border is the outer fieldset.

This is my css:

.mytable{
    font-size: 12px;
    margin: 10px;
    width: 95%;
    border-spacing: 5px;
    text-align: center;
    position: absolute;
    height: 100%;
}

fieldset {
    margin: 0;
    font-size: 12px;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    height: 100%;
}

Answer 1

Ahh wait. If i remove 'position: absolute' and it works. Thank you all for help though

Answer 2

Try adding overflow:auto; to the fieldset

fieldset{
    overflow:auto;
}