min-width doesn't work

Question

I want to create a div that able to expand the width when user input the text

I tried to set width:100%; max-width:600px; min-width:300px;

But some how this div just stay at 600px, is that any way to keep the width stay at 300px and able to expand to 600px base on the length of the content?

Really appreciate if you can help. Thanks

Answer 1

Setting the div to display: inline-block allows it to shift width depending on the contents.

Otherwise, as a block level element, the div will take up 100% of it's containing element (or however wide you set max-width).

Here's a an example:

http://cssdesk.com/Bwp8E

Answer 2

Try:

width: auto;
max-width: 600px;
min-width: 300px;