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 >
        <div >
          <div  data-aos="fade-right">
            <img src="images/polytech.jpg" alt="">
            <div >
              <p>N'hésitez pas à nous contacter pour toute demande de devis.</p>
              <h1>Contactez nous</h1>
              <p>Email : [email protected]</p>
              <p>Téléphone : 06 79 24 06 79 </p>
              <a href="https://www.linkedin.com/company/linko-polytech-grenoble/"><i ></i></a>
              <a href="https://www.facebook.com/linko.polytech/"><i ></i></a>
              <a href="https://www.instagram.com/linko_polytech_grenoble/"><i ></i></a>
            </div>
          </div>
          <div  data-aos="zoom-in">
            <form action="">
              <div >
                <input type="text" name="name" placeholder="Nom" required />
                <input type="text" name="name" placeholder="Prénom" required />
              </div>
              <div >
                <input
                  type="text"
                  name="company"
                  placeholder="Entreprise"
                  required
                />
              </div>
              <div >
                <input type="email" name="email" placeholder="Votre Email" required />
              </div>
              <div >
                <input type="text" name="phone" placeholder="Votre numéro de téléphone" required />
              </div>
              <div  aria-invalid="false">
                <textarea type="text" name="message" placeholder="Votre message"></textarea>
              </div>
              <input type="submit" value="Envoyer" />
              <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

CodePudding user response：

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