我正在尝试让联系人部分根据页面大小和文本框大小动态增加大小。现在它在某个视口溢出页脚甚至整个页面。我的目标是使它响应迅速而不溢出。
以下是当前设置的一些示例：

我真的很感激洞察如何使这一React，这样的联系部分不溢出我的页脚。

main {
  display: flex;
  flex-direction: column;
  background: linear-gradient(#000, #383838);
  color: white;
  justify-content: center;
}

section {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

section h1 {
  flex-basis: 100%;
  width: fit-content;
  text-align: center;
  font-size: 50px;
}

article {
  font-size: 35px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 100vw;
  justify-content: space-around;
  row-gap: 20px;
  height: fit-content;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
}

form {
  display: flex;
  flex-wrap: wrap;
  width: 70vw;
  height: 70vh;
}

#imie {
  flex-basis: 50%;
}

#nazwisko {
  flex-basis: 50%;
}

#email {
  flex-basis: 100%;
}

#tytul {
  flex-basis: 100%;
}

#tresc {
  flex-basis: 100%;
}

#wyslij {
  flex-basis: 50%;
  margin-left: auto;
  margin-right: auto;
}

#wyslij:active {
  transform: translateY(5px);
}

form input,
textarea {
  border-radius: 15px;
  text-align: center;
  margin: 10px;
  border: 5px solid #EEEEEE;
  background-color: rgb(0, 0, 0, 0);
  color: white;
  font-size: 2vw;
  box-shadow: 0px 0px 10px 2px #DEE8F4;
}

form div {
  display: flex;
  flex-wrap: nowrap;
  width: 70vw;
}

<section id="contact">
  <h1>KONTAKT</h1>
  <article>
    <form>
      <div>
        <input type="text" id="imie" name="nazwisko" placeholder="imię">
        <input type="text" id="nazwisko" name="nazwisko" placeholder="nazwisko">
      </div>
      <input type="text" id="email" name="email" placeholder="e-mail">
      <input type="text" id="tytul" name="tytul" placeholder="tytuł wiadomości">
      <textarea id="tresc" name="tresc" placeholder="treść"></textarea>
      <input type="submit" id="wyslij" name="wyslij" value="wyślij">
    </form>
  </article>
</section>
<footer>
  <p>DESPISE 2023 &copy</p>
</footer>
</main>