Div ignoring height and overflow properties

Question

I am trying to make a div with a height: calc(100% - 80px) and an overflow: scroll. The div is completely ignoring both of these rules. Here is what I have attempted:

.tab-content {
    clear: both;
    height: calc(100% - 80px);
    overflow: auto;
}

#tutorial {
    padding: 5%;
}

Tutorial

<div id="tutorial" class="tab-content">
    Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
</div>

Please alert me of where I am going wrong and how to fix the problem.

Answer 1

My guess would be you want make the div 100% - 80px the current window height. For that, you might use 100vh

.tab-content {
    clear: both;
    height: calc(100vh - 80px);
    overflow: auto;
    background: aqua;
}

#tutorial {
    padding: 5%;
}

Tutorial

<div id="tutorial" class="tab-content">
    Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
</div>