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.