Olá, estou criando um formulário com alguns campos to tipo input em HTML utilizando as tags para separar cada campo criado. O problema é que cada campo tem um tamanho. Estou usando o comando "flex-grow" no CSS, porém não está alterando. Já revi o código e não consegui descobrir a causa. Alguém experiente em CSS poderia me ajudar?
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cadastro de Atendimentos</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="teste.css">
</head>
<body>
<div class="header">
<h1 id="titulo">Cadastro de Atendimentos</h1>
<p id="subtitulo">Cadastre o atendimento que será realizado pelo FSE</p>
<br>
</div>
<form>
<fieldset class="grupo_formulario">
<div class="linha1">
<div class="chamado">
<label for="Chamado">Chamado:</label>
<input type="text" name="chamado" id="chamado" maxlength="10" pattern="\d{10}" title="Digite os 10 números do chamado aberto" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
</div>
<div class="swo">
<label for="swo">SWO:</label>
<input type="text" name="swo" id="swo" maxlength="8" pattern="\d{8}" title="Digite os 8 números da SWO" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
</div>
<div class="linha-swo">
<label for="linha">Linha:</label>
<input type="text" name="linha" id="linha" maxlength="3" pattern="\d{3}" title="Digite a linha do atendimento" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
</div>
<div class="cliente">
<label for="cliente">Cliente:</label>
<input type="text" name="cliente" id="cliente" title="Digite o nome do cliente" required>
</div>
</div>
</fieldset>
</form>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #004168;
font-family: "Roboto", sans-serif;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
form {
width: 50%;
max-width: 50%;
background-color: #005492;
padding: 16px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.header {
text-align: center;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.header h1 {
font-size: 1.8rem;
}
.header p {
font-size: 1rem;
color: #ffffff;
}
fieldset.grupo_formulario {
display: flex;
flex-direction: column;
gap: 10px;
border: none;
}
.linha1 {
display: flex;
gap: 10px; /* Espaçamento uniforme entre campos */
width: 100%; /* Garante que ocupa toda a largura do formulário */
}
.linha1 > div {
flex: 1; /* Todos os campos inicialmente têm largura flexível */
}
.linha1 input {
width: 100%; /* Garante que os inputs ocupem toda a largura de seus contêineres */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
/* Ajuste de proporções */
.chamado {
flex-grow: 1; /* Mais espaço para "Chamado" */
}
.swo {
flex-grow: 1; /* Espaço proporcional menor */
}
.linha-swo {
flex-grow: 3; /* Ainda menor */
}
.cliente {
flex-grow: 3; /* Maior espaço para "Cliente" */
}