How to match Input to height of container? - html

Question

My goal is to have a reusable number field with customizable increment/decrement buttons. However, my issue is that I cannot make the input field correctly fill the height of the container.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
height: 100%;
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>
My results on the most recent version of Chrome:
I was unable to find any questions here addressing this specific issue. Any input would be appreciated.

Answer 1

All you need to do is remove the height from the input as shown below
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>

Answer 2

There're at leats 3 ways to achieve this:
make input's height: auto (which is the default) instead of height: 100%. Because it's default, you can just remove height: 100%
add box-sizing: border-box; for input
or manually, add border: 0; padding: 0; instead
Explanation:
From here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box
So height: 100% you declared to input is calculated as only the content part. Meanwhile, input has default padding and border, which added up and made your element look weird.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
height: 100%; /* delete this */
box-sizing: border-box; /* or instead, add this */
border: 0; /* or these */
padding: 0;
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>