为什么我写的表单页面输入框高度一直没办法占满页面？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单页面</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: #F2F2F2;
      }

      #form-container {
        margin: 20px auto;
        height: calc(100vh - 40px);
        padding: 20px;
        background-color: #FFFFFF;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      #form-container textarea {
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        background-color: #F2F2F2;
        resize: none;
      }

      #form-container input[type="submit"] {
        margin-top: 20px;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        background-color: #007AFF;
        color: #FFFFFF;
      }
    </style>
  </head>
  <body onload="document.getElementById('input').focus();">
    <div id="form-container">
      <form>
        <textarea placeholder="请输入内容" id="input"></textarea>
        <input type="submit" value="提交">
      </form>
    </div>
  </body>
</html>

想要的效果是输入框的高度能自适应除去移动端虚拟键盘（如果弹出）+提交按钮的高度

padding textarea input none

• 请不要在回答技术问题时复制粘贴 AI 生成的内容