Controle de corte de transbordamento

Recursos da Web: overflow: clip overflow-clip-margin

Enquanto overflow: hidden é um "instrumento bruto" que quase sempre corta o conteúdo estritamente na caixa de preenchimento, overflow: clip combinado com overflow-clip-margin fornece o "bisturi" para controle de layout refinado em contêineres de blocos.

Especifique exatamente onde o corte ocorre com overflow: clip e overflow-clip-margin. É possível alinhar o limite com precisão às bordas internas do modelo de caixa ou estender o limite de corte além da caixa do elemento por um deslocamento especificado (uma margem de segurança). Essa abordagem moderna tem alta performance e elimina o requisito legado de adicionar contêineres de wrapper extras com padding personalizado e margens negativas apenas para permitir que efeitos visuais (como sombras de elementos filhos proeminentes) sejam renderizados sem cortes.

Os elementos substituídos (<img>, <video>, <canvas> etc.) usam overflow: clip e overflow-clip-margin: content-box por padrão, o que permite controlar de forma limpa as imagens que usam object-fit ou border-radius.

Como implementar

  1. Aplicar overflow: clip: verifique se o elemento de destino tem overflow: clip ativado. A configuração overflow: clip é obrigatória em contêineres de layout de bloco para que overflow-clip-margin tenha efeito. Se overflow for definido como hidden, auto ou scroll, a propriedade overflow-clip-margin será ignorada pelo navegador. overflow: clip impede toda a rolagem (tanto iniciada pelo usuário quanto programática via JavaScript).
  2. Alinhar a uma borda de caixa: use palavras-chave para alinhar com precisão o limite de corte às bordas internas do modelo de caixa:
    • content-box: corta o conteúdo exatamente onde a área de conteúdo começa, deixando a área de padding completamente limpa. O conteúdo para exatamente na borda do padding. Excelente para módulos de layout aninhados.
    • padding-box (padrão): corta o conteúdo na borda interna.
    • border-box: corta o conteúdo na borda externa, permitindo que ele fique abaixo ou se sobreponha parcialmente a uma borda translúcida.
  3. Definir um deslocamento especificado (a sangria): forneça um valor de comprimento (por exemplo, 15px ou 5px) para criar uma zona de segurança antes de cortar pixels. Isso permite que as sombras proeminentes de elementos filhos sejam renderizadas sem cortes além da borda, sem expandir a geometria do layout.
  4. Combinar Box-Edge e Offset: especifique uma borda de caixa e um deslocamento de comprimento simultaneamente (por exemplo, content-box 15px) para deslocar de uma borda de caixa específica.

Exemplo de código

Os exemplos a seguir demonstram os controles de layout de contêiner dinâmico, mostrando o enquadramento aninhado de curva de conteúdo interno automatizado e a proteção de sombra de elementos filhos, além de substitutos de aprimoramento progressivo.

Contêineres de blocos: curvas arredondadas aninhadas

  • Aplique overflow-clip-margin: content-box a um contêiner pai com cantos arredondados e padding personalizado.
  • Aplique cantos arredondados semelhantes em componentes de mídia e rodapé filhos internos ao longo do limite da caixa de conteúdo interno concêntrico, resolvendo curvas de aninhamento estranhas sem a lógica calc() personalizada.
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

Contêineres de bloco: vazamento de sombra do elemento filho

  • Aplique overflow: clip e defina um deslocamento de comprimento overflow-clip-margin estendido para criar uma zona de segurança visível que permita que a sombra do filho seja renderizada sem cortes fora do contêiner pai, sem alterar a geometria do layout. Sem isso, a sombra do filho é cortada no limite do pai.
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

Implementação estratégica e práticas recomendadas

  • É RECOMENDÁVEL aplicar overflow: clip nos elementos de destino ao usar overflow-clip-margin, já que definir overflow estritamente como clip é obrigatório em contêineres de layout de bloco padrão para ativar margens de corte curvas personalizadas ou internas.
  • RECOMENDAMOS definir overflow-clip-margin: content-box em contêineres com padding e cantos arredondados para cortar automaticamente elementos filhos internos não arredondados em curvas de borda aninhadas matematicamente perfeitas sem lógica de subtração de padding manual.
  • FAÇA a configuração de overflow-clip-margin com um deslocamento de comprimento especificado ao aplicar efeitos visuais externos (como filter: drop-shadow()) para evitar o truncamento nítido da caixa delimitadora sem alterar ou expandir a geometria do layout.
  • NÃO aplique overflow: clip se o contêiner exigir manipulação de rolagem programática via JavaScript ou servir como o contexto de layout imediato para elementos position: sticky, já que clip desativa completamente a rolagem.

Estratégias de fallback

Para ambientes de destino sem suporte nativo para overflow: clip ou overflow-clip-margin, as estratégias de substituição de aprimoramento progressivo dependem diretamente da intenção visual:

  • Volte para overflow: hidden como a experiência básica para garantir que os limites principais sejam mantidos.
  • Use overflow: visible como substituto em elementos em que as sombras projetadas ou os selos de canto externo não podem ser truncados.

Concluir a implementação de substituição do aprimoramento progressivo

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}