Expanding a parent <div> to the height of its children

Try this for the parent, it worked for me.

overflow:auto;

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

Try to give max-contentfor parent's height.

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

As Jens said in comment

An alternative answer is How to make div not larger than its contents?… and it proposes to set display:inline-block. Which worked great for me. – Jens Jun 2 at 5:41

This works far better for me in all browsers.

For those who can not figure out this in instructions from this answer there:

Try to set padding value more then 0, if child divs have margin-top or margin-bottom you can replace it with padding

For example if you have

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

it'll be better to replace it with:

#parent
{
    padding: 30px 0px 20px 0px;
}

Expanding a parent <div> to the height of its children

Related

Recent Posts