Responsive height for a form in a card when resizing a textarea

I’m currently working on my first website and I am coding a form in a card (I’ll show the css of the card). My problem is when I try to resize the textarea, it goes beyond the borders of the card and it also moves the button "Send" out of the card. And on top of that the section’s height isn’t resized but there is a scroll bar that appears on the right side.

Here is the html :

<section class="form">
        <div class="container grid">
          <div class="show" data-aos="fade-right">
            <img src="images/polytech.jpg" alt="">
            <div class="card">
              <p>N'hésitez pas à nous contacter pour toute demande de devis.</p>
              <h1>Contactez nous</h1>
              <p>Email : contact@linkopg.onmicrosoft.com</p>
              <p>Téléphone : 06 79 24 06 79 </p>
              <a href="https://www.linkedin.com/company/linko-polytech-grenoble/"><i class="fab fa-linkedin fa-3x"></i></a>
              <a href="https://www.facebook.com/linko.polytech/"><i class="fab fa-facebook fa-3x"></i></a>
              <a href="https://www.instagram.com/linko_polytech_grenoble/"><i class="fab fa-instagram fa-3x"></i></a>
            </div>
          </div>
          <div class="showcase-form card" data-aos="zoom-in">
            <form action="">
              <div class="form-control container grid">
                <input type="text" name="name" placeholder="Nom" required />
                <input type="text" name="name" placeholder="Prénom" required />
              </div>
              <div class="form-control">
                <input
                  type="text"
                  name="company"
                  placeholder="Entreprise"
                  required
                />
              </div>
              <div class="form-control">
                <input type="email" name="email" placeholder="Votre Email" required />
              </div>
              <div class="form-control">
                <input type="text" name="phone" placeholder="Votre numéro de téléphone" required />
              </div>
              <div class="form-control" aria-invalid="false">
                <textarea type="text" name="message" placeholder="Votre message"></textarea>
              </div>
              <input type="submit" value="Envoyer" class="btn btn-secondary "/>
              <div id="status"></div>
            </form>
          </div>
        </div>
      </section>

CSS :

.container.grid {
    max-width: 1200px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}

.card {
    background-color: white;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;  
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    justify-content: center;
    align-items: center;
    height: 100%;

}
.form {
    width: 100%;
    background-color: var(--secondary-color);
    color: black;
    position: relative;
    display: flex;
    margin: 0 auto;
}


.form h1 {
    font-size: 40px;
    font-weight: bold;
}

.form p {
    line-height:1.1em;
    margin: 20px 0;
    font-size: 20px;

}

.showcase-form.card {
    height: 80%;
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    position: inherit;
}

.form img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}
.form a {
    margin: 20px 0;
    padding: 2px;
}

.form i:hover {
    transition: transform 0.3s ease-in;
    transform: translateY(-10px);
}

.form .grid {
    overflow: visible;
    grid-template-columns: 40% 60%;
    gap:  20px;
    padding: auto;
    margin: 0 auto;
    justify-content: flex-end;
}

.form-control.grid {
    overflow: visible;
    grid-template-columns: 50% 50%;
    gap:  10px;
    justify-content: flex-end;
    position: relative;
}

.showcase {
    height: 400px;
    background-color: var(--primary-color);
    color: #fff;
    position: relative;
}

.showcase h1 {
    font-size: 80px;
    font-weight: bold;
}

.showcase p {
    line-height:1.1em;
    margin: 20px 0;
    font-size: 40px;

}

.showcase .grid {
    overflow: visible;
    grid-template-columns: 55% 45%;
    gap: 30 px;
}


.showcase-form .form-control {
    margin: 30px 0;
    height: 100%;
}

.showcase-form input {
    border: 0;
    border-bottom: 1px solid #b4becb;
    width: 100%;
    padding: 3px;
    font-size: 16px;
}


textarea{
    padding: 10px;
    resize: vertical;
    width: 100%;
    height: 250px;
    box-sizing: border-box;
}

.showcase-form input:focus {
    outline: none;
}

Here are the images :

Form before resizing
Form after resizing

form after resizing 2

>Solution :

Try removing the height property from .showcase-form class –

.showcase-form.card {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  position: inherit;
}

or set the height property to fit-content –

.showcase-form.card {
  height: fit-content;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  position: inherit;
}