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;

Answer 3

I just update the "min-width" page on MDN with this information:

In some browsers, on iOS, a <button> element in its native (default) configuration will not respond to min-width.    This problem is due to native buttons.  A <span> inside a native button will exhibit the same problem, despite having display:inline-block set.  When changes are made to other style parameters and the browser is forced to abandon the native button, the min-width setting takes affect.  

Answer 4

Make sure that the div or space your working on isn't: position:fixed;

It needs to be something like: position: relative; or position:absolute;