overflow: auto hides content at the bottom of the page

Question

I have a problem with my html, I couldn’t find an answer. I have a div called box-footer. This div is inside a div main, where I added overflow: auto and height 100%. All that content is inside a father div, box-notification, that I also added height 100%, but the div box-footer the content is hidden that would be an orange button. I can solve the problem using a "gambs".

<div class="box-main">
    <div class="box-content">
        <div class="box-text">
            <p>teste
                <p>
        </div>
    </div>
    <div class="box-footer">
        <button id="load-notifications" class="button btn">Load more notifications</button>
    </div>
</div>