max-content
contenido máximo
`max-content` es el tamaño que el contenido desearía si no se dividiera en puntos de quiebre normales.
Otro ejemplo
Un panel de comandos usa `max-content` para la columna de atajos, por lo que “⌘ Shift P” se mantiene en una sola línea. El nombre del comando usa `minmax(0,1fr)` y solo se acorta cuando el diálogo alcanza el límite de su ventana gráfica. Una traducción larga no puede hacer que el diálogo sea más ancho que ese límite.
Partes principales
- 01Contenido sin envolver
- 02Tamaño intrínseco preferido
- 03restricción de tamaño externo
Úsalo cuando
Úsalo cuando el contenido de una sola línea sea importante y un límite exterior impida que el cuadro se ensanche demasiado.
No lo uses cuando
No lo uses para texto largo de lectura, texto escrito por el usuario o un cuadro sin límite de ancho. Puede desbordar la ventana de visualización.
Nombre usado en código
width: max-content or a max-content grid track Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with contenido máximo (max-content). User context: Un panel de comandos usa `max-content` para la columna de atajos, por lo que “⌘ Shift P” se mantiene en una sola línea. El nombre del comando usa `minmax(0,1fr)` y solo se acorta cuando el diálogo alcanza el límite de su ventana gráfica. Una traducción larga no puede hacer que el diálogo sea más ancho que ese límite. Design concept to apply: contenido máximo (max-content). Why it fits: Úsalo cuando el contenido de una sola línea sea importante y un límite exterior impida que el cuadro se ensanche demasiado. Do not use it when: No lo uses para texto largo de lectura, texto escrito por el usuario o un cuadro sin límite de ancho. Puede desbordar la ventana de visualización. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how contenido máximo (max-content) is used now. Definition: `max-content` es el tamaño que el contenido desearía si no se dividiera en puntos de quiebre normales. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.