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

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.