Position: relative getting cut off by parent element

Question

I have a relatively positioned pop-up div. If the section container behind it is long enough, it displays correctly. But as you can see, the pop-out is getting cut off. How can I make this always show?

*I believe the issue has to do with md-tabs, because if i take it out everything works as expected. I cannot figure out what the styling on the md-tabs is that causes that though.

Here is my css: (i excluded the before and after for simplicity, they are not affecting this)

.AddItemDropdown {
    background: white;
    width: 313px;
    margin-bottom: -374px;
    position: relative;
    padding: 20px;
    left: 209px;
    top: -55px;
    box-shadow: #999 1px 1px 7px;
}

.cpSection {
    border-left: 10px $navy solid;
    margin-top: 20px;
    padding: 5px 20px 5px 20px;
    background: #efefef;
    margin: 10px;
    box-shadow: #999 1px 1px 1px;
}

The simplified HTML (I hope this is enough to get my point across, tried to make it easiest to read)

<div>ng-cloak class="Page">
    <md-tabs md-dynamic-height md-stretch-tabs="always" md-selected="vm.selectedTab">
        <md-tab label="Settings">      
            <div class="Section">
                <h2>List of Items</h2>
                <button class="AddButton">Add New +</button>

                <div class="AddItemDropdown">                       
                        <!--Content-->
                </div>

                <table>
                    <!--Content-->
                </table>
            </div>
        </md-tab>
    </md-tabs>
</div>