How to set content area div height with dynamic header div

Tags: html,css

Problem :

I'm working on styling a container that has header and content area, looks like below.

  widget control
| header text    |  <----- header area
| item1          |
| item2          |  <---- content area
| item3          |
|                |

I used to use position absolute with top, bottom, left, right set to 0 to fill in the space and displays the scrollbar in the content area if more items is added.

However the problem arise when header text is too long causing 2 or more lines:

 widget control

| header text    |
| long text here |  <----- header area
| item1          |
| item2          |  <---- content area
| item3          |
|                |

Now that header area get taller that my absolute positioning fails result in content area being overlapped by the header area.

I've setup simple example on fiddle. This example does not use position absolute approach so overlap is gone but then since header area size cannot be predected, I'm having touch time figuring out how to set height for the content area so that scrollbar fits in to the remaining content area. (the fiddle showing that scrollbar is cut off because content area height is set to 100% which is 100% height of control itself (i.e. 100px)

Note that I'm looking for solution using CSS only and setting static content area height (ex 50px) is not allowed. The reason is this is widget control and user can set the control's height but they do not have control on setting height on header or content area.

So if the user set 300px height for the control, long header text could take up 100px. Then remaining height left for the content area height is 200px.

Thanks in advance.

Solution :

The only way I know how to do this is with flexbox:

.container { 
    width: 300px;
    height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;

.head {
    border: 1px solid blue;
    width: 100%;
    flex-shrink: 0;

.content {
    border: 1px solid green;
    overflow-x: hidden;
    overflow-y: scroll;

<div class='container'>
    <div class='head'> this is head second line asdlkfj aslkf j;alksdj f;laksdjf;laksdjf;laskdf</div>
    <div class='content'>
        <div class='item'>item1</div>
        <div class='item'>item2</div>
        <div class='item'>item3</div>
        <div class='item'>item4</div>
        <div class='item'>item5</div>
        <div class='item'>item6</div>

Updated JSFiddle:

    CSS Howto..

    How does Bootstrap Grid really work?

    Selected text showing oversized selection area

    how to give top property define in css for chrome or firefox

    How can I change the shape of a gridview to circular?

    CSS Layout. Can not get idea how to fix it

    How can I make images fit into a 200 pixel square box using CSS?

    How can I solve this styling issues?

    How to change width of

    css show separator icon for icons

    How to indent input controls for a nested HTML list using CSS to a single column

    Bottom border doesn't show up in Firefox

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    How to select an UNTAG element in CSS

    how to have a css in javascript when onsubmit trigger in another window?

    CSS - How to have 100% height element inside of parent

    How to revise the css transitions with a delay

    How do I highlight only the innermost table row of a nested table?

    How can I apply some css for all readonly elements on focus in IE8?

    How to show a node in a block in drupal 7

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    Javascript - How to get all matching classes and selector from css files for an element [duplicate]

    How to make my text appearing while scrolling website

    How can i integrate php to html table

    CSS: how to layout 3 columns, 2 are optional

    CSS selector problem. Any ideas how to select this?

    How to select only for the first of divs with equal names?

    How to contain a div floating outside of container div

    how to set the child-class height as per the parent div using css

    How can I have columns like this in CSS? (image)