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;

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>

Try to give max-contentfor parent's height.

.parent{
   height: max-content;
}

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

Tags:

Html

Css

Recent Posts