Forms 改变flexbox容器的高度会将布局拧紧

我试图制作一个完全响应的2列联系人表单，但是如果我更改容器的高度（在我的示例中是窗口），那么它会破坏盒子的孔布局。如果我改变宽度，它可以正常工作

以下是指向钢笔的链接：

HTML:

我的目标是拥有一个好的响应性联系人表单，可能还具有更改文本区域大小的能力，并且整个联系人表单都能适应它

如果能在布局问题上得到一些帮助，或者有一些我可以做得更好的想法，我将非常感激

<form>
  <div id="form-flex-container">
    <div class="form-flex-item">
      <div class="inputContainer">
        <input id="name" class="inputs" type="text" name="name" placeholder="Name">
        <span class="formBorder"></span>
      </div>
    </div>
    <div class="form-flex-item">
      <div class="inputContainer">
        <input id="replyto" class="inputs" type="email" name="_replyto" placeholder="E-Mail">
        <span class="formBorder"></span>
      </div>
    </div>
    <div class="form-flex-item">
      <div class="inputContainer">
        <input id="submit" class="inputs" type="submit" value="Send">
        <span class="formBorder"></span>
      </div>
    </div>
    <div class="form-flex-item">
      <div class="inputContainer">
        <textarea id="message" class="inputs" name="nachricht" placeholder="Ihre Nachricht ..."></textarea>
        <span class="formBorder"></span>
      </div>
    </div>
  </div>
</form>

$durationOfAnim: 0.8s;

html, body {
  height: 100vh;
  background: linear-gradient(hsl(99°, 90%, 61%), hsl(99°, 90%, 70%));
}

form {
  height: 100%;
  width: 100%;
}

#form-flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  justify-content: space-between;
  align-content: space-around;
}

#form-flex-container > .form-flex-item {
  width: 50%;
  flex-basis: 40%;
  padding: 5px;
  &:nth-child(3) {
    flex-basis: 20%;
  }
  &:last-child {
    flex-basis: 100%;
  }
  @media only screen and (max-width: 600px){
    width: 100%;
    flex-basis: auto;
    flex: 1;
    &:first-child {
      order: 1;
    }
    &:nth-child(2) {
      order: 2;
    }
    &:nth-child(3) {
      order: 4;
      flex: 0.5;
    }
    &:last-child {
      order: 3;
      flex: 3;
    }
  }
}

.inputContainer {
  position: relative;
  height: 100%;
  width: 100%;
}

.inputs {
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transition: box-shadow $durationOfAnim/4;
  padding: 10px;
  &:focus {
    outline: none;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    transition: box-shadow $durationOfAnim;
    &~.formBorder {
      width: 100%;
      transition: width $durationOfAnim;
    }
  }
}

#submit {
  height: 100%;
  &:hover {
    outline: none;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    transition: box-shadow $durationOfAnim;
    &~.formBorder {
      width: 100%;
      transition: width $durationOfAnim;
    }
  }
}

#message {
  resize: none;  
}

.formBorder {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  width: 0;
  height: 3px;
  border: none;
  background-color: green;
  transition: width $durationOfAnim/4;
}