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