overflow: auto hide content at the bottom of the page

I have a problem with my html, I could not 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 of this content stays inside a parent div, box-notification , which I also added height 100% , but the content% div is hidden that would be an orange button. I can solve the problem by using some 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>