How to make a div grow with content?

Answer 1

If you used float it prevents <div> to grow up with content so you can use clear after float and it will work.

<div class="clear-fix"></div>

.clear-fix{
   clear: both;
}

Answer 2

You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).

Working code pen example

Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):

 min-height: 200px;
  min-width: 100px;

Answer 3

The default behaviour for divs is to fill the entire available width. A few ways to override this:

• set display: inline-block (not IE-friendly)
• float it (with the side effect of, well, floating it)
• set display: inline (but that's almost never what you want)
• set position: absolute
• hard-code a width (no dynamic width though)

As a last resort, consider javascript.

Answer 4

If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container

overflow:hidden

in order to let it grow!

Answer 5

Use the magical css property called "flex", it is really amazing

yourDiv{
display:flex;
}

Just make sure that the children are not position: absolute because this will not work with flex.