javascripthtmlcssreactjsflexbox

Div doesn't occupy space in mobile

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

enter image description here

<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

Solution

  • The problem is the the height property you 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 your CSS to specify that the height should be set to the whole element.

    * {
  box-sizing: border-box;
}

    Solution 2 (not preferred, though)

    By using calc() in CSS, you can specify the height to be:

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