How to make a div grow with content?

Question

Pertaining to html, how do I make a div container grow with the content instead of manually defining a width and height.

<div id="container">
  <div id="logo">
    <img src="someimage.png"/>
  </div>
</div>

No matter what the dimensions of logo are, container does not grow with it. :( How would I fix this, or can it be fixed?

stecb · Accepted Answer · 2011-01-11 11:35:31Z

49

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!

answered Jan 11, 2011 at 11:35

stecb

14.8k3 gold badges54 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

seebiscuit Over a year ago

Very interesting! Why does this work? Can you provide more documentation about this?

tdammers · Accepted Answer · 2011-01-11 11:40:30Z

16

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.

answered Jan 11, 2011 at 11:40

tdammers

20.7k1 gold badge41 silver badges57 bronze badges

1 Comment

euh Over a year ago

Can you elaborate how would js help here?

molham556 · Accepted Answer · 2018-01-22 14:49:53Z

6

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.

edited Jan 22, 2018 at 14:49

answered Jul 5, 2017 at 14:36

molham556

1931 silver badge6 bronze badges

5 Comments

me_ Over a year ago

needs more information... as your answer stands it doesn't work with nested divs of variable height.

molham556 Over a year ago

Of course it does , i use it everyday , unless the div are display absolute !

me_ Over a year ago

that might have been handy information to include in your answer... so, " needs more information... as your answer stands it doesn't work..."

me_ Over a year ago

by the way... absolute is a position property value, not a display property value

molham556 Over a year ago

ok , well the value flex to the display property will allow you arrang items inside the div invoked on. IT will help you to keep all the items for an example to the left or to the right or even spread them with equal spaces between then , horizontally or vertically. Obviously if the divs are position fixed or sticky or absolute this will not work with flex. Here is more detailed inforamtions because i cant write eveything here, it is too long. css-tricks.com/snippets/css/a-guide-to-flexbox

FrenkyB · Accepted Answer · 2016-07-11 20:04:50Z

1

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;

answered Jul 11, 2016 at 20:04

FrenkyB

7,30719 gold badges75 silver badges125 bronze badges

1 Comment

MalliKharjuna Rao Over a year ago

If the content is larger than the minimum height, the min-height property has no effect. not sure how this helps

user4157124 · Accepted Answer · 2020-11-11 00:11:28Z

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;
}

edited Nov 11, 2020 at 0:11

user4157124

3,00021 gold badges33 silver badges48 bronze badges

answered Nov 10, 2020 at 21:58

reda sewalm

111 bronze badge

Comments

Ali Mahmoodi · Accepted Answer · 2025-01-25 18:39:53Z

0

For my case I use this line of CSS :

    min-height: fit-content;

answered Jan 25 at 18:39

Ali Mahmoodi

1,25414 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make a div grow with content?

6 Answers 6

1 Comment

1 Comment

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related