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.