StackOverflow - Overlaying divs in flexbox layout

http://stackoverflow.com/questions/37268996/overlaying-divs-in-flexbox-layout/37274567#37274567

HTML

<main>
        <div style="background: red;">
            A
        </div>

        <header class="filter-compact">
            <div id="headerWrapper">
                <nav>B</nav>
                <span id="toggleFilter"></span>
                <div id="filterContainer">
                    C
                </div>
            </div>
            <div id="clipboardContainer">D</div>
        </header>

        <div id="contentWrapper">
            <div id="contentLeftWrapper">
                <div id="headerLeftContainer">E</div>
                <div id="contentLeftContainer" style="background-color: yellow;">
                    F START<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    F END
                </div>
                <div id="footerLeftContainer">G</div>
            </div>
            <div id="contentRightWrapper">
                <div id="headerRightContainer">H</div>
                <div id="contentRightContainer" style="background-color: yellow;">
				<div class="popupI">
					<div class="popupJ">PopupJfixedwithfullwidthandlimitofheightPopupJfixedwithfullwidthandlimitofheight</div>
					Popup I fixed with full size
				</div>
				H...

CSS

html, body {
	height: 100%;
	width: 100%;
}

body {
	padding: 0;
	margin: 0;
}

main {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: stretch;
	align-items: stretch;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

header {
	display: flex;
	flex-wrap: nowrap;
	min-height: 84px;
	height: 175px;
	max-height: 175px;
	flex: 1 0 auto;
	position: relative;
}

header #headerWrapper {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	background-color: magenta;
	overflow: hidden;
}

header #headerWrapper nav {
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	background-color: green;
	overflow: hidden;
}

header #headerWrapper #toggleFilter {
	display: none;
	position: absolute;
	right: 195px;
	bottom: 0px;
	width: 16px;
	height: 38px;
	background-color: red;
}

header #headerWrapper #filterContainer {
	min-height: 44px;
	height: 135px;
	max-height: 135px;
	background-color: gray;
	flex: 1 0 auto;
	overflow: hidden;
}

header #clipboardContainer {
	width: 175px;
	height: 175px;
	background-color: blue;
	overflow: hidden;
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	-ms-transition: height 0.2s;
	-o-transition: height 0.2s;
	transition: height 0.2s;
}

header.filter-collapse #headerWrapper #toggleFilter {
	display: inline-block;
}

header.filter-compact {
	height: 84px;
	max-height: 84px;
}

header.filter-compact #headerWrapper #filterContainer {
	height: 44px;
	max-height: 44px;
}

header.filter-compact #clipboardContainer {
	height: 84px;
}

header.filter-compact #clipboardContainer:hover {
	height: 175px;
	position: absolute;
	right: 0px;
}

#contentWrapper {
	display: flex;
	flex: 1 1 auto;
	align-content: stretch;
	align-items: stretch;
	overflow: auto;
}

#contentWrapper #contentLeftWrapper, #contentWrapper #contentRightWrapper {
	flex: 1 0 50%;
	display: flex;
	flex-direction: column;
}

#contentWrapper #contentLeftWrapper #contentLeftContainer, #contentWrapper #contentRightWrapper #contentRightContainer...