Input elements overflowing CSS Grid

Question

I tried the solution with mixmax(0, 1fr) too but the input field doesn't seem to adapt its width to the grid container. At around 430px width in the browser responsive mode, it starts to overflow the grid container.

I don't want to hard-code the width.

Could some one please help me fix and explain this behavior to me?

 .form_container { background-color: white; padding: 1rem; }.form_container.register_1 { display: grid; grid-template-columns: 5% 1fr 5%; grid-template-rows: repeat(5, 2rem); row-gap: 0.5rem; background-color: blue; border-radius: 1rem; }.form_container.register_1 div { grid-column: 2; display: grid; grid-template-columns: 1fr 2fr; column-gap: 1rem; place-items: center; }.form_container.register_1 div label { color: white; font-weight: 400; place-self: center end; }.form_container.register_1 div input { border-radius: 1rem; border: none; padding: 1em; font-family: "Poppins", sans-serif; height: calc(1.4 * 1rem); }.form_container.register_1.submit_button { width: 80%; place-self: end; }.form_container.register_1.submit_button a { margin-top: 1rem; color: white; text-decoration: none; border: 0.1em solid white; text-align: center; border-radius: 0.4em; padding: 0.2em 1em; font-weight: 400; }

 <div class="form_container"> <form class="register_1" action=""> <div class="username"> <label for="username">Username</label> <input type="text" name="username" placeholder="Username"> </div> <div class="fname"> <label for="fname">Full Name</label> <input type="text" name="fname"> </div> <div class="email"> <label for="email">Email</label> <input type="text" name="email"> </div> <div class="password"> <label for="username">Password</label> <input type="password" name="username"> </div> <div class="confirm_password"> <label for="confirm_password">Confirm Password</label> <input type="password" name="confirm_password"> </div> <div class="submit_button"> <a href="/" name="submit">Save</a> </div> </form> </div>

Answer 1

You have a typing error. I think it will work properly when you remove or fix it. I guess thats the font-family.

At line 29:

 .form_container{ background-color: white; padding: 1rem; .register_1{ display: grid; grid-template-columns: 5% 1fr 5%; grid-template-rows: repeat(5, 2rem); row-gap: 0.5rem; background-color: blue; border-radius: 1rem; div{ grid-column: 2; display: grid; grid-template-columns: 1fr 2fr; column-gap: 1rem; place-items: center; label{ color: white; font-weight: 400; place-self: center end; } input{ border-radius: 1rem; border: none; padding: 1em;'Poppins', sans-serif; // HERE:.; height. calc(1:4 * 1rem); } }:submit_button{ width; 80%: place-self; end: a{ margin-top; 1rem: color; white: text-decoration. none; border: 0;1em solid white: text-align. center; border-radius: 0.4em; padding: 0;2em 1em; font-weight: 400; } } } }

Answer 2

Ok fixed it by giving the input element a width of 100%;