How to make my code responsive? I want a scrollbar to be added to the entire page when the Flexbox wraps to a new line, not just inside the Flexbox div. I’ve noticed that when the content grows and the Flexbox items wrap, the scrolling behavior is only affecting the Flexbox container itself rather than the entire page. This makes it difficult to navigate when there is more content than expected. I want the scrollbar to appear at the page level so that the entire layout remains accessible without being restricted to the specific container. How can I ensure that the page scrolls naturally when items wrap, instead of just confining the overflow to the Flexbox div?
"use client";import "./cadastrar-usuario.css";import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";import { useState } from "react";import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";export default function CadastroUsuario() { const [formData, setFormData] = useState({ primeiroNome: "", ultimoNome: "", usuario: "", email: "", senha: "", confirmarSenha: "", }); const handleInputChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const [erro, setErro] = useState<string>(); const handleSubmit = async (e) => { e.preventDefault(); // Erro: As senhas devem coincidir if (formData.senha !== formData.confirmarSenha) { setErro("Erro! As senhas não coincidem!"); return; } setErro(""); try { const response = await fetch("http://localhost:8000/en/api/users/", { method: "POST", headers: {"Content-Type": "application/json", }, body: JSON.stringify({ first_name: formData.primeiroNome, last_name: formData.ultimoNome, username: formData.usuario, email: formData.email, password: formData.senha, }), credentials: "include", }); if (!response.ok) { const errorData = await response.json(); const firstKey = Object.keys(errorData)[0]; const errorMessage = errorData[firstKey]?.[0]; setErro(errorMessage); return; } const data = await response.json();console.log(data);window.location.href = "/login"; } catch (error) {console.error(error); setErro("Erro inesperado! Tente novamente mais tarde!"); } }; return (<div className="pagina-container"><div className="background-img"></div><div className="menu"><BotaoRedondo url={"/login"} texto={"Voltar"}></BotaoRedondo><form><div className="cadastro-div"><h3 className="cadastro">Cadastrar-se</h3> {erro && <div className="erro">{erro}</div>}</div><div className="inputs-superiores"><div className="input-div"><label className="label">Primeiro nome:</label><input id="primeiroNome" name="primeiroNome" onChange={handleInputChange} value={formData.primeiroNome} type="text" placeholder="Primeiro nome" /></div><div className="input-div"><label className="label">Último nome:</label><input id="ultimoNome" name="ultimoNome" onChange={handleInputChange} value={formData.ultimoNome} type="text" placeholder="Último nome" /></div><div className="input-div"><label className="label">Usuário:</label><input id="usuario" name="usuario" onChange={handleInputChange} value={formData.usuario} type="text" placeholder="Usuário" /></div></div><div className="inputs-inferiores"><div className="input-div"><label className="label">E-mail:</label><input id="email" name="email" onChange={handleInputChange} value={formData.email} type="email" placeholder="E-mail" /></div><div className="input-div"><label className="label">Senha:</label><input id="senha" name="senha" onChange={handleInputChange} value={formData.senha} type="password" placeholder="Senha" /></div><div className="input-div"><label className="label">Confirmar senha:</label><input id="confirmarSenha" name="confirmarSenha" onChange={handleInputChange} value={formData.confirmarSenha} type="password" placeholder="Confirmar senha" /></div></div></form><BotaoRedondoSubmit handleSubmit={handleSubmit} texto={"Cadastrar"}></BotaoRedondoSubmit></div></div> );}"use client";import "./cadastrar-usuario.css";import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";import { useState } from "react";import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";export default function CadastroUsuario() { const [formData, setFormData] = useState({ primeiroNome: "", ultimoNome: "", usuario: "", email: "", senha: "", confirmarSenha: "", }); const handleInputChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const [erro, setErro] = useState<string>(); const handleSubmit = async (e) => { e.preventDefault(); // Erro: As senhas devem coincidir if (formData.senha !== formData.confirmarSenha) { setErro("Erro! As senhas não coincidem!"); return; } setErro(""); try { const response = await fetch("http://localhost:8000/en/api/users/", { method: "POST", headers: {"Content-Type": "application/json", }, body: JSON.stringify({ first_name: formData.primeiroNome, last_name: formData.ultimoNome, username: formData.usuario, email: formData.email, password: formData.senha, }), credentials: "include", }); if (!response.ok) { const errorData = await response.json(); const firstKey = Object.keys(errorData)[0]; const errorMessage = errorData[firstKey]?.[0]; setErro(errorMessage); return; } const data = await response.json(); console.log(data); window.location.href = "/login"; } catch (error) { console.error(error); setErro("Erro inesperado! Tente novamente mais tarde!"); } }; return (<div className="pagina-container"><div className="background-img"></div><div className="menu"><BotaoRedondo url={"/login"} texto={"Voltar"}></BotaoRedondo><form><div className="cadastro-div"><h3 className="cadastro">Cadastrar-se</h3> {erro && <div className="erro">{erro}</div>}</div><div className="inputs-superiores"><div className="input-div"><label className="label">Primeiro nome:</label><input id="primeiroNome" name="primeiroNome" onChange={handleInputChange} value={formData.primeiroNome} type="text" placeholder="Primeiro nome" /></div><div className="input-div"><label className="label">Último nome:</label><input id="ultimoNome" name="ultimoNome" onChange={handleInputChange} value={formData.ultimoNome} type="text" placeholder="Último nome" /></div><div className="input-div"><label className="label">Usuário:</label><input id="usuario" name="usuario" onChange={handleInputChange} value={formData.usuario} type="text" placeholder="Usuário" /></div></div><div className="inputs-inferiores"><div className="input-div"><label className="label">E-mail:</label><input id="email" name="email" onChange={handleInputChange} value={formData.email} type="email" placeholder="E-mail" /></div><div className="input-div"><label className="label">Senha:</label><input id="senha" name="senha" onChange={handleInputChange} value={formData.senha} type="password" placeholder="Senha" /></div><div className="input-div"><label className="label">Confirmar senha:</label><input id="confirmarSenha" name="confirmarSenha" onChange={handleInputChange} value={formData.confirmarSenha} type="password" placeholder="Confirmar senha" /></div></div></form><BotaoRedondoSubmit handleSubmit={handleSubmit} texto={"Cadastrar"}></BotaoRedondoSubmit></div></div> );}.pagina-contatiner { display: flex; overflow-y: auto;}html, body { height: 100%; /* Garantir que o body ocupe 100% da altura */ overflow-y: auto; /* Permite a rolagem */ margin: 0; /* Remover margens padrão */}.background-img { position: fixed; /* Mantém a imagem fixa no fundo */ top: 0; left: 0; width: 100%; height: 100%; /* Cobrir toda a tela */ background-image: url('../../../public/images/login-background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */}.menu { position: fixed; /* Fixa o menu no fundo */ bottom: 0; left: 0; width: 100%; height: 25vh; /* Ajuste conforme necessário */ background-color: #441C1C; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; z-index: 1; /* Garantir que o menu fique acima da imagem */}.content { flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */ padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */ overflow-y: auto; /* Permite a rolagem vertical */ min-height: 100vh; /* Garante que a div tenha altura mínima */}form { display: flex; flex-direction: column; justify-content: space-around; gap: 5px;}.cadastro-div { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}.cadastro { font-size: 1.8rem; color: #FFFFFF; text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000; margin: 0;}.input-div { display: flex; flex-direction: column; margin: 0 15px;}.inputs-superiores { display: flex; justify-content: space-around;}.inputs-inferiores { display: flex; justify-content: space-around;}.label { color: #FFFFFF; font-weight: bold;}.pagina-contatiner { display: flex; overflow-y: auto;}html, body { height: 100%; /* Garantir que o body ocupe 100% da altura */ overflow-y: auto; /* Permite a rolagem */ margin: 0; /* Remover margens padrão */}.background-img { position: fixed; /* Mantém a imagem fixa no fundo */ top: 0; left: 0; width: 100%; height: 100%; /* Cobrir toda a tela */ background-image: url('../../../public/images/login-background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */}.menu { position: fixed; /* Fixa o menu no fundo */ bottom: 0; left: 0; width: 100%; height: 25vh; /* Ajuste conforme necessário */ background-color: #441C1C; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; z-index: 1; /* Garantir que o menu fique acima da imagem */}.content { flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */ padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */ overflow-y: auto; /* Permite a rolagem vertical */ min-height: 100vh; /* Garante que a div tenha altura mínima */}form { display: flex; flex-direction: column; justify-content: space-around; gap: 5px;}.cadastro-div { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}.cadastro { font-size: 1.8rem; color: #FFFFFF; text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000; margin: 0;}.input-div { display: flex; flex-direction: column; margin: 0 15px;}.inputs-superiores { display: flex; justify-content: space-around;}.inputs-inferiores { display: flex; justify-content: space-around;}.label { color: #FFFFFF; font-weight: bold;}