My React website has a header that extends off the screen when using a smartphone keyboard

Question

I googled into it but could not find a solution. I tried to solve the problem with CSS and JS but it behaved differently in different browsers. Please let me know if you have any good libraries or methods.

  return (
    <>
      <div style={{
        justifyContent: 'center',
        alignItems: 'center',
        height: `${height * 0.9}px`,
        width: '90%',
        margin: 'auto',
        position: 'relative',
      }}>
        <HowToPlay />
        <QuestionExample />
        <MainContainer>
          <ChatContainer>
            <MessageList>
              {messages.map((msg, index) => (
                <Message
                  key={index}
                  model={{
                    message: msg.message,
                    sentTime: msg.sentTime,
                    sender: msg.sender,
                    direction: msg.direction,
                  }}
                />
              ))}
            </MessageList>
            <MessageInput
              id="input"
              placeholder="20文字以内で質問してください。"
              attachButton={false}
              onSend={message => response(convertToArabicNumbers(message.slice(0, 20)))}
              disabled={isFinished}
              style={isMobile ? { bottom: `${keyboardHeight}px` } : {}}
            />
          </ChatContainer>
        </MainContainer>
      </div>
    </>
  );