how to make a DIV that increases in size whenever you increase the content?

Depends, will the div increase the width or height?

You can use this for width:

min-width: 100px;
min-width: 500px;

Or for height:

min-height: 100px;
max-height: 500px;

You put a minimum limit for this div and a maximum limit, because when you are putting content inside the div it will increase to a certain limit.

All div's have this behavior by default. They will adjust as needed.

What you can do, is to set the minimum and maximum size, as Romario Pires commented. This will give you better control of layout , without "messing up" your site.

Any other% w / o% you set will override this default behavior of css . Here's my example: link

Type any text you want in div and note how textarea will fit into your text. No need for any definition. The only thing it has is the limit of div and max-width , to ensure that it does not exceed that space and it messes up the layout of the site.

Now an important note, if your max-height is not behaving this way, there is probably some property / class that is overriding this behavior. So I recommend you improve your question and add the specific case you want to solve.