Div doesn't occupy space in mobile

Question

I have a div with three elements: input field, timer, reset button in desktop view all three elements are of the same height but when I view it on an iphone 12 mini specifically the timer and reset button shrink in height. When I tested its dimensions using chrome dev tools this issue didn't come up

<div style={{ display: "flex", flexDirection: 'row', justifyContent: 'space-between', height: '8vh', alignItems: 'center', }}>
                    <input
                        type="text" autoCorrect="off" autoCapitalize="none"
                        ref={inputRef}
                        value={typedWord}
                        onChange={handleInputChange}
                        disabled={timer ? false : true}
                        autoFocus={true}
                    />
                    <div className="timer">
                        <span style={{
                            fontSize: 20, fontFamily: 'lexend', color: 'var(--text-color)',
                        }}>{timer}s</span>
                    </div>
                    <div className="reset" onClick={() => {
                        setRotated(!rotated);
                        resetTest();
                        setTypedChars([]);
                        setTest(false)
                    }}>
                        <FiRefreshCcw size={25} color={'var(--text-color)'} className={rotated ? 'icon rotate' : 'icon'} />
                    </div>
                </div>

input {
  background-color: var(--sub-alt-color);
  border: 1px solid var(--sub-color);
  color: var(--text-color);
  border-radius: 5px;
  padding-left: 20px;
  width: 65.5%;
  max-width: 65.5%;
  min-height: 8vh;
  height: 8vh;
  font-size: 18px;
  outline: none;
  transition: border-color 0.3s ease;
}

.timer {
  width: 14.5%; display: flex; user-select: none; height: 8vh; min-height: 8vh; flex-shrink: 0; align-items: center; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
}
.reset {
  width: 14.5%; display: flex; height: 8vh; align-items: center; min-height: 8vh; flex-shrink: 0; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;
  cursor: pointer;
}

Here is the site

Answer 1

the problem is the the height property u specify is set to the content height and there's an additional 4px for the input (padding, border).

you can fix that using one of the following solutions

Solution 1:-

just specify box-sizing mode in to your css code to specify the height set to whole element

* {
  box-sizing: border-box;
}

Solution 2 (not preferred though):-

by using calc() in css u can specify the height to be:

input {
   calc(8vh - 4px);
}