absolute parent - display overflow on child content - css

Question

http://codepen.io/Kalesh/pen/xbBmdj?editors=110
Absolute parent containing a header and content divs. Both are dynamic. I want to display scroll-bar on the content only.
I don't want to give any height to header or make the content absolute with top X.
Is there any way to accomplish this?
#parent {
position:absolute;
top: 10px; bottom: 225px; right: 340px; width: 320px;
border: 1px solid black;
}
#header {
border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}
#content {
padding: 10px;
font-size: 20px;
}
<div id="parent">
<div id="header">
HEADER
Duis risus eros, bibendum nec pretium at, eleifend non nisi.
</div>
<div id="content">
CONTENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
</div>
</div>

Answer 1

Since the header must have a flexible height, it will be difficult to achieve this in old CSS. However, new browsers support flexible boxes, which are perfect for this:
#parent {
display: flex; /* Magic begins */
flex-direction: column; /* Column layout */
}
#content {
flex: 1; /* Starting at 0, grow to fill the remaining space */
overflow: auto; /* Add scrollbars if necessary */
}
#parent {
position:absolute;
top: 10px; bottom: 225px; right: 340px; width: 320px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
#header {
border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}
#content {
padding: 10px;
font-size: 20px;
flex: 1;
overflow: auto;
}
<div id="parent">
<div id="header">
HEADER
Duis risus eros, bibendum nec pretium at, eleifend non nisi.
</div>
<div id="content">
CONTENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
</div>
</div>