Why doesn't the <input> element respect min-width?

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

In the link above the textbox should have only 10px instead it has a width of 152px.

This is

Answer 1

The .main container spans the width of the content inside and only if you resize the screen to small size you will see that the input actually fits inside with smaller than the default input width. If you change the width of the .main content you will observe that the input changes it's default width on large screen and shrinks to no less than the min-width value.

.main{
  position:absolute;
  border:1px solid black;
  width: 75px;
  min-width:15px;  
}

http://jsbin.com/xeyupinaja/3/edit

Answer 2

You have a min-width set, but no max-width.

The textbook has a default size set by the browser. That default size in greater than the min-height, so the both the browser and the css are happy to let that default width take place and increase the width of the container.

By setting a max-width or a width for the container, the container's and input's size will be restricted and their sizes will be computed accordingly.

.main{
  position:absolute;
  border:1px solid black;
  min-width:14px;
  max-width:140px; // What do you want here?
}

I think this is also what @sdcr answered and he also gave you details about the default size and computations.

Answer 3

There is size="20" set on <input> type text, search, tel, url, email, and password ... by default, which is approximately of 100px width, although it can vary in a different browser and operating system.

On the parent, you have min-width:15px; set, that does not take any effects, because the value is much smaller than 100px. If you change it to width:15px; or max-width:15px; you will then see the differences.

Alternatively you can give the size a very small value such as size="1".

Answer 4

change your css width as 155px

.input{  
  width:155px;  //Replace 100% to 155px
 box-sizing:border-box;
 }