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

Question

我正在尝试制作一个完整的响应式2列联系表单，但如果我要更改容器的高度（在我的示例中为Window），那么它会搞砸Box的孔布局。如果我正在更改宽度，它可以正常工作。

以下是笔的链接：https://codepen.io/DesingerThan/pen/MVqLWo?editors=1100

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>

SCSS：

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

我的目标是有一个很好的响应式联系表格也可以改变Textarea的大小，整个联系表格适应它。

我非常感谢关于布局问题的一些帮助，或者对于如何更好地做到这一点我会非常感谢。