Estoy creando un formulario con html y ccs y me di cuenta de que al darle 100% de ancho a un input este se debería ajustar al tamaño del contenedor, pero no es así, el input sobrepasa el contenedor. ¿No debería quedar dentro del contenedor? Si le doy un tamaño de 300px al contenedor padre, el input debería ajustar su tamaño a un máximo de 300px pero este se sale del contenedor.
De igual manera si le doy un padding al input de 40px de izquierda y a 40px a la derecha para agregar unos iconos, también se comporta de esta manera. el padding no debería empujar hacia dentro el contenido del mismo sin alterar el tamaño del input? tampoco entiendo por qué se pasa del tamaño del contenedor. Me gustaria saber el motivo y como arreglarlo.
body {
width: 100vw;
height: 100vh;
background-color: bisque;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.login {
max-width: 300px;
height: 200px;
background-color: cadetblue;
}
.inputs {
width: 100%;
height: 50px;
}
.conPadding {
padding-left: 40px;
padding-right: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prueba</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="login">
<label for="">Name</label>
<input type="text" class="inputs" />
<input type="text" class="inputs conPadding" />
</div>
</div>
</body>
</html>