Flexbox with div overlays

HTML

<div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerMiddle">Middle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet.</div>
    <div class="headerRight">Right</div>
    <div class="overlay">Overlay</div>
</div>

CSS

.header {
    border: 3px solid orange;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    /* -webkit-box-orient: horizontal; */
    z-index: 0;
    position: relative;
    /* position: absolute; */
}

.headerLeft {
    border: 2px solid chartreuse;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerMiddle {
    border: 2px solid darkorchid;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}
.headerRight {
    border: 2px solid darkorange;
    -webkit-flex: 1;
    flex: 1;
    z-index: 1;
}

.overlay {
    border: 2px solid green;
    z-index: 10;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    /* top: 0; left: 0; */
    /* width: 100%; height: 100%; */
    /* display: -webkit-flex; */
    /* flex-align: center; flex-pack: center; */
    /* display: block; */
    /* clear: both; */
    background: rgba(0,0,0,0.3);
}