Overflow

As classes utilitárias de overflow do  WPF controlam como o conteúdo excedente de um elemento é tratado, permitindo gerenciar a visibilidade e o comportamento de rolagem em elementos com dimensões limitadas. Elas são ideais para layouts com contêineres , modais ou áreas de conteúdo restritas . 

 Como Funcionam as Classes de Overflow 

 As classes de overflow seguem uma sintaxe intuitiva que permite definir o comportamento geral ou por eixo ( x ou y ) , com ou sem tipo específico ( hidden , scroll , visible ). O padrão overflow sem modificadores aplica overflow: auto; como valor padrão. 

 

 

 

 Atributos Válidos 

 

 Comportamento 

 

 

 

 

 

 auto 

 Deixa o navegador encarregado do comportamento. Seu funcionamento pode variar. 

 

 

 hidden 

 O conteúdo é cortado e nenhuma barra de rolagem é exibida. 

 

 

 scroll 

 O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise. 

 

 

 visible 

 Valor padrão . O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo. 

 

 

 

 As classes são traduzidas diretamente para propriedades CSS. Veja alguns exemplos: 

 

 

 overflow → overflow: auto; 

 

 

 overflow-x → overflow-x: auto; 

 

 

 overflow-y-hidden → overflow-y: hidden; 

 

 

 overflow-scroll →  overflow: scroll; 

 

 

 Como Usar 

 As classes de overflow são aplicadas a elementos com dimensões definidas (ex.: width , height , max-width , max-height ) para controlar o comportamento do conteúdo que excede essas dimensões. Elas são úteis para criar áreas roláveis, ocultar conteúdo excedente ou manter visibilidade. 

 Exemplo 1: Overflow Padrão 

 Aplica rolagem automática para conteúdo excedente em ambas as direções: 

 <div class="w-300px h-200px overflow">

 <p><!-- Conteúdo longo que excederá o contêiner... --></p>

</div> 

 Exemplo 2: Overflow por Eixo 

 Habilita rolagem horizontal, mas oculta o conteúdo vertical excedente: 

 <div class="w-300px h-200px overflow-x overflow-y-hidden">

 <p><!-- Conteúdo longo horizontalmente e verticalmente... --></p>

</div> 

 Exemplo 3: Overflow com Tipo Específico 

 Cria uma área com rolagem vertical forçada e conteúdo horizontal visível: 

 <div class="w-300px h-200px overflow-y-scroll overflow-x-visible">

 <p><!-- Conteúdo com rolagem vertical e visibilidade horizontal... --></p>

</div> 

 Exemplo 4: Combinação com Posicionamento 

 Usa overflow com classes de posicionamento e centralização: 

 <div class="relative w-100% h-400px overflow-hidden">

 <div class="absolute center(c) w-200px h-200px overflow-y-scroll">

 <p><!-- Conteúdo rolável centralizado... --></p>

 </div>

</div> 

 Notas 

 Dimensões : Sempre defina width , height , max-width ou max-height no elemento para que o overflow funcione corretamente. 

 Rolagem Automática : Use overflow ou overflow-(x|y) para rolagem apenas quando necessário. 

 Combinações : Combine com classes de posicionamento ( absolute , relative , etc.) e offsets ( top , left , etc.) para layouts complexos. 

 Forçar Rolagem : Aplicar o tipo scroll em um elemento evita o problema de barras de rolagem aparecendo e desaparecendo quando o conteúdo é dinâmico . Tenha em mente que Impressoras podem imprimir o conteúdo vazado . 

 As classes overflow-x e overflow-y são úteis para controle granular em layouts responsivos. 

 O valor visible pode causar sobreposição de conteúdo fora do contêiner, então use com cuidado. 

 Para áreas roláveis, certifique-se de que o contêiner tenha conteúdo suficiente para ativar a rolagem.