Warum nicht die Element Respekt min-Breite?

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

Im obigen Link sollte das Textfeld nur 10 Pixel haben, stattdessen hat es eine Breite von 152px.

Dies ist der 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

Es sieht so aus, als würde die Eingabe erst danach die richtige Breite erhalten .main min-width ist größer als 156px.

Es gibt size="20" eingestellt auf <input> Typ text, search, tel, url, emailund password … standardmäßig, was ungefähr der ist 100px Breite, obwohl sie in einem anderen Browser und Betriebssystem variieren kann.

Auf dem Elternteil haben Sie min-width:15px; gesetzt, das hat keine Auswirkungen, da der Wert viel kleiner als ist 100px. Wenn du es änderst width:15px; oder max-width:15px; dann siehst du die unterschiede.

Alternativ können Sie die geben size ein sehr kleiner Wert wie z size="1".

Du hast ein min-width eingestellt, aber nein max-width.

Das Lehrbuch hat eine vom Browser festgelegte Standardgröße. Diese Standardgröße ist größer als die min-widthsodass sowohl der Browser als auch das CSS gerne diese Standardbreite übernehmen und die Breite des Containers erhöhen.

Durch Setzen von a max-width oder ein width für den Container werden die Größe des Containers und der Eingabe eingeschränkt und ihre Größen werden entsprechend berechnet.

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

Ich denke, das ist auch die Antwort von @sdcr, und er hat Ihnen auch Details zur Standardgröße und den Berechnungen gegeben.

Ändern Sie Ihre CSS-Breite auf 155px

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

Das .main Container erstreckt sich über die Breite des Inhalts und nur wenn Sie den Bildschirm auf eine kleine Größe ändern, werden Sie sehen, dass der input passt tatsächlich mit einer kleineren als der Standardeingabebreite hinein. Wenn Sie die ändern width des .main Inhalt werden Sie feststellen, dass die input ändert seine Vorgabe width auf großem Bildschirm und schrumpft auf nicht weniger als die min-width Wert.

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

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