0

I have a parent div that is set to be 480px tall. It has two children both of which have there content dynamically filled with AJAX, so I don't know how tall they will end up being. The top child acts as a header and I need all the information to display but the second child will just have a long list that will have overflow: auto;. Is there a way make the second child just fill in the rest of the space that the first child didn't use?

<div id = "parent">
    <div id = "child1" >
        <h2>Header</h2>
        <p>Paragraph. I don't know ho long it will be.</p>
    </div>
    <div id = "child2" >
        <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>etc...</li>
        </ul>
    </div>
</div>

#parent {
    background-color: cornflowerblue;
    max-width: 700px;
    height: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
}
#child2 {
    height: 150px;
    overflow: auto;
}
#child2 ul {
    list-style: none;
    margin: 0;
    padding 0;
}

Looking around I found a couple solutions that were kind of close to what I need but not quite right. For example this question had a good solution but required the first child to be a fixed height. This one is even closer but still no good, for the same reason. Is there even a way to work around this?

Community
  • 1
  • 1
bdemann
  • 1

3 Answers3

0

Seems like you are already ok because as both of the children will get the content the first one will fill as much as it needs and the second one will fill the rest with the overflow triggered. Just remove the height: 150px; from the second child.

user3734429
  • 322
  • 1
  • 10
  • I tried that and it didn't work. Without the height: 150px; it just overflows the parent div. I would like it to stop when it reaches the end of the parent div and then at that point activate the scroll bar for the child2 div. Is that possible? – bdemann May 19 '15 at 22:59
  • No, I need it to be more like this [http://jsfiddle.net/bdemann/btx4no7g/3/](http://jsfiddle.net/bdemann/btx4no7g/3/) – bdemann May 20 '15 at 14:11
0

In the end I changed it so instead of having the height be dynamically set based on the content I just set the height in the code. It was only in one place so it wasn't that bad to use do it manually.

bdemann
  • 1
0

Take a look at Flexbox

This can be accomplished simply with the following css:

#parent {
    display: flex;
    flex-flow: column nowrap;
}
#child1 {
    flex: 0 0 auto;
}
#child2 {
    flex: 1 1 auto;
}
  • tells the parent to arrange it's children in a column.
  • tells the first child to take exactly as much space as it wants; no more, no less.
  • tells the second child to expand or shrink to fit the remaining space.

Demo

A good overview of Flexbox can be found here.

starchild
  • 496
  • 2
  • 8