CODEWITHSUNDEEP
htmlcss
wayne
wayne

Reputation: 61

min-width doesn't work

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

Upvotes: 6

Views: 29249

Answers (5)

fernandomatiasdv
fernandomatiasdv

Reputation: 81

min-width: 100px;
width: fit-content;

Upvotes: 0

IAM_AL_X
IAM_AL_X

Reputation: 1341

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.  

Upvotes: 1

Ryan Olds
Ryan Olds

Reputation: 4847

Try:

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

Upvotes: 7

Nick Tomlin
Nick Tomlin

Reputation: 29221

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

Upvotes: 14

Baza207
Baza207

Reputation: 2142

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;

Upvotes: 0

Related Questions