element to fill remaining vertical height with scrollbars if needed - html

Question

What is the most modern solution to the following layout requirement:
two elements are to fit inside a container element, and not extend outside of that container.
each are 100% width of container.
And the sum of their heights added together is the same as the container height(maybe some padding or margins involved).
the header element is to expand vertically to fit its content.
the .fillNscroll element is to fill the remaining vertical space to the bottom of div.info and apply vertical scroll bars if it vertically overflows within that constraint.
can i do this with just CSS3 and HTML5 ? (not worried about compatibility with earlier browsers). If not is there a jQuery plugin ?
+------------------------+
| <section> |
| fixed width & height |
| |
| +------------------+ |
| | <header> | |
| | variable height | |
| | | |
| | | |
| +------------------+ |
| |
| +------------------+ |
| |<div.fillNscroll> | |
| | fill remaining ^ |
| | height | |
| | | |
| | with scrollbars | |
| | on overflow | |
| | | |
| | V |
| +------------------+ |
| |
+------------------------+
HTML5:
<section class="info">
<header>
<h1>Halophryne queenslandiae (and the occasional extra long name that causes the header to flow into multiple lines)</h1>
</header>
<div class="fillNscroll">
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
<p>Variable length content. may overflow the .fillNscroll div eventually</p>
</div>
</section>
CSS (LESS):
// make padding and border inside width and height for everything !
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div, h1, h2, h3, p, .info {
border: 1px solid red;
}
section.info {
position: absolute;
left: 50px;
width: 200px;
height:300px;
padding: 10px;
header {
}
.fillNscroll{
height: 100%;
}
}
can i do this with just CSS3 and HTML5 ? (not worried about compatibility with earlier browsers)