Make Höhe der Ein- und div gleich ihren Eltern

Question

ich den folgenden Code haben:

.wrapper { 
 
    display: flex; 
 
    height: 25px; 
 
} 
 
.myInput { 
 
    width: 50px; 
 
    height: 100%; 
 
    border: 1px solid grey; 
 
    border-right: none; 
 
} 
 
.myInputAddon { 
 
    width: 25px; 
 
    height: 100%; 
 
    background-color: green; 
 
    border: 1px solid green; 
 
}

<div class="wrapper"> 
 
    <input class="myInput"> 
 
    <div class="myInputAddon" type="number"></div> 
 
</div>

dachte ich, wenn ich gebe eine hartkodierte Höhe meiner Wrapper div (in der Beispiel 25px) und dann height: 100%; zu seinen Kind-Elementen, würden sie korrekt biegen und die gleiche Höhe haben.

Aber in meinem Ausschnitt ist meine Eingabe höher als mein div.

Wenn ich die Höhe aus dem Wrapper Div entfernen und geben Sie die Eingabe eine Höhe 23px und die Child-div 25px, funktioniert es. Aber ich möchte es ein bisschen dynamisch einstellen.

Es sollte wie folgt aussehen:

Wie kann ich das tun?

Danke und Prost.

Answer 1

Das Problem ist default Polsterung des Eingabeelements, so können Sie nur hinzufügen box-sizing: border-box und Padding innerhalb Höhe des Elements zu halten.

.wrapper { 
 
    display: flex; 
 
    height: 25px; 
 
} 
 
.wrapper * { 
 
    box-sizing: border-box; 
 
} 
 
.myInput { 
 
    width: 50px; 
 
    height: 100%; 
 
    border: 1px solid grey; 
 
    border-right: none; 
 
} 
 
.myInputAddon { 
 
    width: 25px; 
 
    height: 100%; 
 
    background-color: green; 
 
    border: 1px solid green; 
 
}

<div class="wrapper"> 
 
    <input class="myInput"> 
 

 
    <div class="myInputAddon" type="number"></div> 
 
</div>

Answer 2

Das input Element Standardstil aus dem Browser:

Nehmen Sie die folgenden Einstellungen:

.wrapper { 
 
    display: flex; 
 
    height: 25px; 
 
} 
 
.myInput { 
 
    width: 50px; 
 
    height: 100%; 
 
    border: 1px solid grey; 
 
    border-right: none; 
 
    box-sizing: border-box; /* NEW; padding and border now absorbed into height:100% */ 
 
} 
 
.myInputAddon { 
 
    width: 25px; 
 
    height: 100%; 
 
    background-color: green; 
 
    border: 1px solid green; 
 
    box-sizing: border-box; /* NEW */ 
 
}

<div class="wrapper"> 
 
    <input class="myInput"> 
 
    <div class="myInputAddon" type="number"></div> 
 
</div>