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
По умолчанию для параметра <input> type text, search, tel, url, email и password... установлено значение size="20", которое приблизительно 100px ширине 100px, хотя может отличаться в разных браузерах и операционных системах.
На родительском у вас есть min-width:15px; установить, что не имеет никакого эффекта, потому что значение намного меньше, чем 100px. Если вы измените его на width:15px; или max-width:15px; тогда вы увидите различия.
В качестве альтернативы вы можете дать size очень малое значение, такие как size="1".
У вас есть набор 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, и он также рассказал вам подробности размера и вычислений по умолчанию.
измените ширину css как 155px
.input{
width:155px; //Replace 100% to 155px
box-sizing:border-box;
}
Контейнер .main охватывает ширину содержимого внутри, и только если вы измените размер экрана до небольшого размера, вы увидите, что input действительно вписывается внутрь с меньшей шириной ввода по умолчанию. Если вы измените width содержимого .main, вы заметите, что input изменит его по умолчанию width на большом экране и сжимается до значения min-width.
.main{
position:absolute;
border:1px solid black;
width: 75px;
min-width:15px;
}