Home Why an input element's width expands its parent width when i set width:100%?

Questions

Why an input element's width expands its parent width when i set width:100%?

January 13, 2023

I have a form element that contains a form, and an input.

When you run the snippet you find that the width of the input is over of its parent div.

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  background-color: rgb(27 27 50 / 80%);
  border-radius: 0.2rem;
  height: 100vh;
  min-width: 600px;
  padding: 3rem;
}

.form-group {
  background-color: red;
}

.form-group input {
  display: block;
  width: 100%;
}

.form-group input:focus {
  outline-color: red;
  outline-width: 1px;
}

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <meta name="charset" content="utf-8" />
  <meta name="viwport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./normalize.css" />
  <link rel="stylesheet" href="./index.css" />
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <div class="form-group">
        <label for="name" id="name-label"
          >Name<input
            id="name"
            type="text"
            placeholder="Enter your name"
            required
        /></label>
      </div>
    </form>
  </body>
</html>

>Solution :

It’s because input type text has default padding from the browser, to quick fix it, just add box-sizing: border-box; to the .form-group input:

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  background-color: rgb(27 27 50 / 80%);
  border-radius: 0.2rem;
  height: 100vh;
  min-width: 600px;
  padding: 3rem;
}

.form-group {
  background-color: red;
}

.form-group input {
  display: block;
  width: 100%;
  box-sizing: border-box
}

.form-group input:focus {
  outline-color: red;
  outline-width: 1px;
}

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <meta name="charset" content="utf-8" />
  <meta name="viwport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./normalize.css" />
  <link rel="stylesheet" href="./index.css" />
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <div class="form-group">
        <label for="name" id="name-label"
          >Name<input
            id="name"
            type="text"
            placeholder="Enter your name"
            required
        /></label>
      </div>
    </form>
  </body>
</html>