CSS Grid 父级中的输入标记元素溢出

Question

输入字段的宽度似乎无法适应网格容器。在浏览器响应模式下大约 430px 宽度时，它开始溢出网格容器。

我不想硬编码宽度。

有人可以帮我解决这个问题并向我解释一下吗？

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

<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>
    </form>
</div>

Answer 1

您输入错误。我认为当您删除或修复它时它会正常工作。我想这就是字体系列。

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