Vertical CSS Flexbox with squares - html

Question

I'm trying to achieve a responsive Layout with:
- A fixed header width width 100% and an height of e.g. 50px
- 3 equal squares on the right, taking over the whole space from the top to the bottom of the page.
- A main content are taking over the remaining space on the page
Currently my code looks like this (jsfiddle) but I can't get the width of the boxes on the right to be set automatically based on the current height in order to be displayed as squares... Does anybody know a solution for this in pure CSS?
HTML:
<div id="mainView">
<div id="content">
</div><!-- content -->
<div id="squaressWrapper">
<div id="square1"></div><!-- dummy -->
<div id="square2"></div><!-- dummy -->
<div id="square3"></div><!-- dummy -->
<div id="square4"></div><!-- dummy -->
</div><!-- squaressWrapper -->
</div><!-- mainView -->
</div><!-- wrapper -->
CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
#header {
height: 50px;
width: 100%;
background: #ffb8c4;
}
#mainView {
flex: 1;
-webkit-flex: 1;
position: relative;
background: #666;
}
#squaressWrapper {
position: absolute;
height: 100%;
background: green;
right: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
#square1 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}
#square2 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}
#square3 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}

Answer 1

I get a solution, using vh units as suggested by Nicho.
The CSS
#squaressWrapper {
position: absolute;
height: 100%;
width: 33vh;
right: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
.squares {
position: relative;
flex: 1;
-webkit-flex: 1;
width: calc(100% - 15px);
border: 2px solid white;
background: green;
right: -11px;
}
demo
The dimensions are a little bit strange because setting the width of the container to calc(33vh - 15px) didn't work.
May be in a near future that will be easier.
I don't know what is the browser support for this, I tested it only in Chrome.
Note : 15px is the dimension of the header (45px) divided by the number of squares.

Answer 2

Well I took a shot at this...
I changed your sizes up on your css
here is the link to the fiddle.
http://jsfiddle.net/D7RSP/2/
#header {
height: 20%;
width: 100%;
background: #ffb8c4;
}
#mainView {
flex: 1;
width: 69%;
height: 100%;
float: left;
background: green;
}
.square {
flex: 1;
-webkit-flex: 1;
width: 30%;
border: 1px solid white;
background: green;
height: 25%;
float:right;
}