Why doesn't the 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".

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-width, 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

change your css width as 155px

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

Answer 4

You wouldn't think this would work, but setting width: 0 does allow the input element to be shrunk fully assuming it is inside a flexbox. The actual width of the element itself won't be 0 if the flex is set to be higher than 0.

Answer 5

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