Почему элемент <input> не учитывает min-width?

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

В приведенной выше ссылке текстовое поле должно иметь только 10 152px а ширина 152px.

Это код:

.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

ОТВЕТЫ

Ответ 1

По умолчанию для параметра <input> type text, search, tel, url, email и password... установлено значение size="20", которое приблизительно 100px ширине 100px, хотя может отличаться в разных браузерах и операционных системах.

На родительском у вас есть min-width:15px; установить, что не имеет никакого эффекта, потому что значение намного меньше, чем 100px. Если вы измените его на width:15px; или max-width:15px; тогда вы увидите различия.

В качестве альтернативы вы можете дать size очень малое значение, такие как size="1".

Ответ 2

У вас есть набор min-width, но не max-width.

Учебник имеет размер по умолчанию, заданный браузером. Этот размер по умолчанию больше, чем min-height, поэтому браузер и css с удовольствием позволяют использовать эту ширину по умолчанию и увеличивать ширину контейнера.

Установив для контейнера max-width или width, размер контейнера и ввода будет ограничен, и их размеры будут вычислены соответствующим образом.

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

Я думаю, что это тоже то, что ответил @sdcr, и он также рассказал вам подробности размера и вычислений по умолчанию.

Ответ 3

измените ширину css как 155px

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

Ответ 4

Контейнер .main охватывает ширину содержимого внутри, и только если вы измените размер экрана до небольшого размера, вы увидите, что input действительно вписывается внутрь с меньшей шириной ввода по умолчанию. Если вы измените width содержимого .main, вы заметите, что input изменит его по умолчанию width на большом экране и сжимается до значения min-width.

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

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