Overflow y scroll en CSS

Qué pasa cuando el contenido es más grande que su caja.

.code-pane {
  max-height: 24rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.snippet {
  overflow-x: auto;
  white-space: pre;
}

:target {
  scroll-margin-top: 4rem;
}

Cómo funciona

1. overflow: auto muestra una barra de scroll solo cuando hace falta.
2. overscroll-behavior: contain evita que el scroll se encadene a la página.
3. scroll-margin-top mantiene un ancla libre de un encabezado sticky.

Palabras clave y builtins usados aquí

• overflow
• rem

El intento, en números

Líneas

15

Caracteres a escribir

193

Tokens

42

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 34 segundos.

Escribe este fragmento

Paso 6 de 6 en Cajas; paso 19 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →