Div не занимает место на мобильном телефоне ⇐ CSS

[Anonymous]

У меня есть элемент div с тремя элементами: поле ввода, таймер, кнопка сброса в представлении на рабочем столе, все три элемента имеют одинаковую высоту, но когда я просматриваю его на iphone 12 mini, в частности, таймер и кнопка сброса уменьшаются по высоте. Когда я проверял его размеры с помощью инструментов разработки Chrome, эта проблема не возникла

Код: Выделить всё

{timer}s

{
setRotated(!rotated);
resetTest();
setTypedChars([]);
setTest(false)
}}>




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;
}

Вот сайт

Подробнее здесь: https://stackoverflow.com/questions/790 ... -in-mobile