CSS - 100% height / width issue - html

Question

I need your help with:
html, body and #content have a height of 100% && #toolbar have a height of 50px and he is static => I need to calculate the height of #content to fill the content without scroll bar
#content > .a must have a width of 300px and #content > .b must calculate the width to fill the content
jsfiddle.net:
https://jsfiddle.net/4uesapnt/2/
https://jsfiddle.net/4uesapnt/2/embedded/result/

Answer 1

1) You can use the CSS3 calc() function (docs) and viewport units (vh, vw) (docs) for this.
#content {
height: calc(100vh-50px); /* substract #toolbar height from the entire page's height*/
}
2) Once again, you can use viewport units and the calc() function:
#content > .a {
width: 300px;
}
#content > .b {
width: calc(100vw-300px); /* substract #content .a's width from the entire page's width */
}
Here it is on JSFiddle: https://jsfiddle.net/hL7nxs6v/1/
Please note that if you resize the window to be less in width than 300px + some reasonable width for .b, the layout might break if there aren't any appropriate min-widths assigned.
Browser support for viewport units, calc function via Can I Use.

Answer 2

This appears to work for me in Chrome. I've never used flex before so I don't really know what the support is like:
https://jsfiddle.net/eeesrkjr/
I gave the #content a top padding to leave space for the header, and because of box-sizing:border-box; it doesn't force it over the 100% height. Then then header is absolutely positioned in that 50px space. I experimented briefly with getting the header inside #content so as not to have to absolutely position, but flex was doing weird things. Perhaps you could try that route if you have a better understanding of how those things interact.
HTML:
<div id="toolbar" class="flex aic jcsb">
<div class="a">A</div>
<div class="b">B</div>
<div class="c flex aic jcsb">
<div class="b">C</div>
<div class="c">D</div>
<div class="d">E</div>
</div>
</div>
<div id="content" class="flex">
<div class="a">A</div>
<div class="b">B</div>
</div>
Styles:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #111;
font-family: "Helvetica Neue";
font-weight: 300;
}
#toolbar {
background: linear-gradient(#333, #222);
border-bottom: 1px solid #000;
color: #bbb;
height: 50px;
padding: 0 25px;
width:100%;
position:absolute;
top:0px;
}
#toolbar > .c > div {
margin: 0 12.5px;
}
.flex {
display: flex;
}
.flex.aic {
align-items: center;
}
.flex.jcsb {
justify-content: space-between;
}
.flex.fdc {
flex-direction: column;
}
#content {
color: #fff;
height: 100%;
padding-top:50px;
box-sizing:border-box;
}
#content > .a {
background: red;
width: 300px;
float:left;
}
#content > .b {
background: blue;
width:100%;
}