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 the code:

.input {    width: 100%;    box-sizing: border-box;  }    .cont {    padding: 2px;  }    .main {    position: absolute;    border: 1px solid black;    min-width: 15px;  }

<div class='main'>    <div class='cont'>      <input type="text" class='input' />    </div>  </div>  <br/>  <br/>  <br/> the textbox should have 10px

It looks like the input starts to get the correct width only after .main min-width is greater than 156px.

Answer 1

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".