覆盖高度不适应内容

Question

如何修复此html / css以使顶部div不与底部div重叠。顶部div不会增长，尽管叠加内容会发生变化，并且仍然保持在60px的最小高度;

<style>
.relative {
    position: relative;
}

.relative:after {
    clear: both;
    content: "";
    display: table;
}

.overlay-outer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.overlay-inner {
    display: table;
    width: 100%;
    height: 100%;
    border: 1px solid #F2F2F2;
    background: rgba(255, 255, 255, 0.7);
}

.overlay-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
}
 </style>
 <div style="width: 350px;">
<div>
    <div class="relative" style="min-height: 60px;">
        <div class="overlay-outer ng-isolate-scope">
            <div class="overlay-inner">
                <div class="overlay-content">
                    <div class="padding-bottom-5 ng-binding ng-scope" data-ng-if="line1">There     are no unpaid items.</div>
                    <div class="padding-bottom-5 ng-binding ng-scope" data-ng-if="line2">content   content content content content content content content content content content content content content content content content content content content content content</div>
                </div>
            </div>
        </div>            
    </div>
</div>
</div>
<div style="border: 1px solid black; background: blue; color: white;">
Some text here that should not be overlapped, yet it is overlapping ...
</div>

谢谢，