Por qué un elemento flex no se encoge en CSS

Todo elemento flex tiene un tamaño mínimo automático, y es la razón de que tu texto se desborde.

.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.toolbar .title {
  flex: 1 1 0;
  /* sin esto, un título largo se niega a truncarse */
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar .actions { flex: 0 0 auto; }
.toolbar .search { flex: 0 1 18rem; }

Cómo funciona

1. flex: 1 fija crecer, encoger y una base de 0 en un solo valor.
2. Un elemento no se encoge por debajo de su contenido salvo con min-width: 0.
3. flex-basis es el tamaño inicial, antes de crecer o encogerse.

Palabras clave y builtins usados aquí

• display
• flex
• gap
• overflow
• rem

El intento, en números

Líneas

17

Caracteres a escribir

310

Tokens

71

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 53 segundos.

Escribe este fragmento

Paso 5 de 6 en Flexbox; paso 5 de 24 en Flexbox y grid.

← Anterior Siguiente →