barra de rolagem | Vetores e Animação com SVG: trabalhando com CSS e JavaScript

Boa noite! Preciso de ajuda!

DÚVIDA 1:

Eu preciso deixar os FILDSET (esses agrupamentos de inputs) todos dentro dessa div do lado esquerdo (entrada) e quando for ultrapassado a quantidade, que elas não fiquem como estão na foto. Fora da div. Eu quero que elas fiquem dentro da div e que eu possa visualizar as que ultrapassaram usando a barra de rolagem.

DÚVIDA 2:

Como faço para todo o meu projeto ficar somente dentro da página de visualização? Sem que aparece automaticamente a barra de rolagem. Mas a barra de rolagem na div onde estão os FILDSET deverá ter a barra de rolagem.

Obrigado!!

</head>
<body>
    <header>
        <div class="cabecalho">          
        <div class="chegadaseSaidas">
        <p class="Chegada">Chegada</p>
        <p class="Saida">Saída</p>
    </div>   
    </header>
    <div class="container">
        <div class="esquerdo">
            <fieldset class="ficha1">
                <input class="matricula1" type="text">
                <p class="procedencia1">CIDADE</p>
                <input class="destino1" type="text">
                <input class="horario1" type="text">
                <input class="modelo1" type="text">
                <input class="marca1" type="text">
                <input class="quantidade1" type="text">
                <input class="nome1" type="text">
                <input class="cnh1" type="text">
                <input class="silo11" type="text">
                <input class="silo21" type="text">
                <input class="silo31" type="text">
                <input class="silo41" type="text">
                <input class="saida1" type="text">
            </fieldset>
            <fieldset class="ficha1">
                <input class="matricula1" type="text">
                <p class="procedencia1">CIDADE</p>
                <input class="destino1" type="text">
                <input class="horario1" type="text">
                <input class="modelo1" type="text">
                <input class="marca1" type="text">
                <input class="quantidade1" type="text">
                <input class="nome1" type="text">
                <input class="cnh1" type="text">
                <input class="silo11" type="text">
                <input class="silo21" type="text">
                <input class="silo31" type="text">
                <input class="silo41" type="text">
                <input class="saida1" type="text">
            </fieldset>
            <fieldset class="ficha1">
                <input class="matricula1" type="text">
                <p class="procedencia1">CIDADE</p>
                <input class="destino1" type="text">
                <input class="horario1" type="text">
                <input class="modelo1" type="text">
                <input class="marca1" type="text">
                <input class="quantidade1" type="text">
                <input class="nome1" type="text">
                <input class="cnh1" type="text">
                <input class="silo11" type="text">
                <input class="silo21" type="text">
                <input class="silo31" type="text">
                <input class="silo41" type="text">
                <input class="saida1" type="text">
            </fieldset>
            <fieldset class="ficha1">
                <input class="matricula1" type="text">
                <p class="procedencia1">CIDADE</p>
                <input class="destino1" type="text">
                <input class="horario1" type="text">
                <input class="modelo1" type="text">
                <input class="marca1" type="text">
                <input class="quantidade1" type="text">
                <input class="nome1" type="text">
                <input class="cnh1" type="text">
                <input class="silo11" type="text">
                <input class="silo21" type="text">
                <input class="silo31" type="text">
                <input class="silo41" type="text">
                <input class="saida1" type="text">
            </fieldset>
          

        </div>
        <div class="direito">
        </div>
    </div>
</body>
<footer>    
</footer>
</htm

Oii, Estudante! Tudo bem?

Obrigada por interagir no fórum compartilhando sua dúvida. Vamos solucioná-la juntos.

Como sugestão, primeiro, para deixar os FILDSET dentro da <div>e adicionar uma barra de rolagem quando necessário, você pode definir um tamanho máximo para a <div> e adicionar a propriedade overflow: auto; no CSS. Dessa forma, quando os FILDSET ultrapassarem o tamanho da <div>, a barra de rolagem será exibida

Segundo, para que todo o projeto fique somente dentro da página de visualização e a barra de rolagem seja exibida apenas na <div> onde estão os FILDSET, você pode definir o tamanho da página usando a propriedade vh (viewport height) no CSS. Sendo assim, a altura da <div> será ajustada com base na altura da janela ( vh).

Espero que as sugestões sejam um bom ponto de partida para você. Continue se dedicando aos estudos e qualquer dúvida, compartilhe no fórum.

Bons estudo e sucesso!