Tailwind CSS flex: búsqueda y acciones sin desbordamientos

Usa Tailwind CSS flex para distribuir controles a lo largo de un eje y decidir qué elemento crece, cuál conserva el tamaño de su contenido y qué ocurre cuando falta espacio. En una barra adaptable de búsqueda y acciones, empieza apilando los grupos, deja que el buscador aproveche el ancho disponible y permite que las acciones cambien de línea. Prueba etiquetas largas antes de elegir un breakpoint.

Esta guía construye una barra ficticia para una lista de proyectos: buscador, botón Filtros y acción Nuevo proyecto. Los ejemplos, las reglas de composición y las comprobaciones son recomendaciones de diseño. Sirven para hacer visibles las decisiones; ninguna combinación de clases garantiza por sí sola la accesibilidad ni resuelve todos los productos.

Define el contrato de la barra

Asigna una responsabilidad a cada parte antes de fijar sus dimensiones. El buscador recibe una consulta, Filtros abre las opciones de refinamiento y Nuevo proyecto inicia otra tarea. Conserva esa secuencia en el documento. En nuestra propuesta para pantallas estrechas, el buscador queda encima de las acciones para no reducirlo a un campo difícil de utilizar.

Escribe el comportamiento esperado junto al diseño: el buscador ocupa su fila; las acciones siguen siendo legibles; la barra puede aumentar de altura; ningún control esencial desaparece. Revisa etiquetas reales como «Nuevo proyecto desde plantilla». Una composición que solo funciona con «Añadir» todavía no demuestra que admita el contenido de la tarea.

Separa el formulario de búsqueda y el grupo de acciones como hijos del contenedor exterior. Después aplica otra distribución flex al grupo de acciones. Los botones podrán negociar su espacio juntos mientras el buscador mantiene una regla de tamaño independiente. La referencia de flex de Tailwind documenta las utilidades de los hijos; aquí elegimos un contrato concreto para esta barra.

No añadas el rol ARIA toolbar solo por el aspecto visual. El ejemplo utiliza un formulario de búsqueda y botones normales. Si el producto necesita un widget compuesto con navegación mediante flechas, especifica e implementa esa interacción por separado. Agrupar controles visualmente no basta para cambiar su modelo de teclado.

Prepara tres muestras para revisar: una consulta corta, otra con un nombre de proyecto y otra con un identificador largo. Conserva las mismas dos acciones y la misma anchura exterior en todas. Así podrás separar la presión del contenido de otros cambios. Si falla únicamente el identificador, investiga su cadena de tamaños antes de rediseñar toda la página o introducir una navegación diferente.

Separa la distribución y el tamaño

El padre define dirección, alineación y separación; cada hijo determina cómo consume el espacio. En el ejemplo, el contenedor estrecho es una columna y pasa a fila cuando dispone de suficiente anchura. El buscador recibe flex-1 en esa disposición amplia y las acciones conservan un tamaño ligado a su contenido.

Una primera versión puede usar «flex flex-col gap-3 sm:flex-row sm:items-end» en el contenedor exterior. Asigna «min-w-0 sm:flex-1» al formulario y «flex flex-wrap gap-3» al grupo de acciones. Son decisiones iniciales, no valores universales para todos los componentes. Una barra lateral o una traducción extensa puede exigir una transición posterior.

Dentro del formulario, utiliza una etiqueta visible y un campo con «w-full min-w-0». Define también el envío: decide si Intro envía el formulario o si la aplicación actualiza resultados mientras cambia la consulta. Flexbox no implementa la búsqueda, los avisos de resultados ni la gestión de peticiones. Diseña esos estados antes de dar la pantalla por terminada.

La documentación de diseño adaptable explica que las utilidades sin prefijo forman la base y que las variantes de breakpoint se aplican desde su anchura mínima. Por tanto, sm:flex-row no significa «la distribución de un teléfono pequeño». Comprueba los breakpoints configurados en el proyecto, que podrían diferir de los valores predeterminados.

Si necesitas revisar responsabilidades de estilo, consulta Tailwind CSS frente a CSS directo. Mantén las reglas de tamaño cerca del componente y explica su propósito. Así la siguiente persona podrá distinguir una restricción deliberada de una clase añadida para corregir un caso aislado.

Resuelve el ancho mínimo

Si un elemento flex se resiste a estrecharse, inspecciona su tamaño mínimo y sus descendientes antes de añadir otro breakpoint. Un identificador largo dentro de un grupo anidado puede imponer un límite ligado al contenido. En una fila, ese límite puede empujar las acciones fuera del contenedor aunque el padre tenga una anchura razonable.

La especificación de CSS Flexbox define un tamaño mínimo automático para los elementos flex en las condiciones correspondientes. Las utilidades de ancho mínimo de Tailwind permiten establecer una restricción explícita. En nuestra propuesta, min-w-0 permite estrechar el formulario por debajo de su mínimo automático de contenido; no decide cómo se presentan todos sus descendientes.

Inspecciona desde el elemento que sobresale hacia fuera. Revisa primero un campo con ancho fijo, después su envoltorio y finalmente el hijo del contenedor flex. Elimina mínimos accidentales o justifica los límites necesarios. Si dos contenedores anidados imponen su propio mínimo, cambiar solo el texto interior puede dejar intacto el problema exterior.

Elige además una política para el texto. Una descripción puede ocupar varias líneas; una acción breve puede conservar una sola si su grupo tiene permiso para bajar. Un identificador técnico largo quizá necesite un punto de ruptura o una vista de detalle desde la que copiarlo. Evita truncar la información que distingue dos proyectos parecidos.

Usa las herramientas del navegador para cambiar una propiedad cada vez y anota el fallo mínimo reproducible. Compara mínimo calculado, ancho real y descendiente que desborda. «El formulario puede encogerse y su campo ocupa el ancho resultante» explica mejor el mantenimiento que «añadimos min-w-0 a todos los elementos».

Compara dos registros similares: un proyecto llamado «Planificación» y otro con una referencia extensa de un cliente. Pide a una persona que identifique el correcto sin abrirlo. Si el recorte se lo impide, revisa también la información presentada. Conserva el contexto que permite distinguir registros antes de optimizar la densidad visual de la fila.

Elige saltos de línea antes de recortar

El grupo de acciones utiliza flex-wrap para que un botón pueda pasar a otra línea cuando ya no cabe junto a sus vecinos. Permitimos que el grupo crezca en altura. Revisa su alineación con el buscador y comprueba la separación vertical con el mismo cuidado que la horizontal.

La documentación de flex-wrap distingue entre permitir saltos y mantener todos los elementos en una línea. La referencia de overflow describe por separado el recorte y el desplazamiento. Ocultar lo que sobresale cambia su visibilidad; no devuelve al usuario una acción que ha desaparecido. Recorta únicamente cuando la política del contenido lo permita.

Prueba una etiqueta de filtro muy larga y una acción traducida. Si un solo botón supera el ancho disponible, permitir saltos entre botones no resuelve su composición interna. Deja que su etiqueta ocupe dos líneas, acórtala sin perder significado o dale una fila completa de forma deliberada. Comprueba también que el indicador de foco siga visible.

El desplazamiento horizontal puede ser apropiado en una región diseñada para ello, pero introduce otra decisión de navegación. Para esta pequeña barra recomendamos crecer verticalmente. Evita convertir la página entera en un lienzo con desplazamiento horizontal solo para conservar la alineación de una captura.

Si la página contiene una colección de tarjetas alineadas, consulta la guía de Tailwind Grid adaptable. Es otra tarea de distribución: la barra negocia una secuencia de controles; la colección puede necesitar columnas coordinadas entre varias filas. No fuerces ambas estructuras a compartir exactamente las mismas reglas.

Prueba la tarea en pantallas estrechas

Construye una pequeña matriz de aceptación alrededor de la tarea real. Empieza con 320 píxeles CSS y revisa después una anchura intermedia, una página amplia y ambos lados de la transición elegida. Son muestras de revisión propuestas: el breakpoint definitivo debe seguir el punto en que tu contenido sigue siendo utilizable.

La explicación de Reflow de W3C describe presentar contenido de desplazamiento vertical a una anchura equivalente a 320 píxeles CSS sin perder información ni funcionalidad, con las excepciones indicadas. Una barra que pasa esta prueba no demuestra la conformidad de toda la página. Revisa también resultados, paneles, navegación y comportamiento del foco.

Repite la misma secuencia en cada tamaño: entra en el buscador, escribe una consulta larga, alcanza Filtros, cierra su panel y activa Nuevo proyecto. Hazlo también con etiquetas españolas extensas. Comprueba que el orden del documento coincide con la secuencia visual significativa. Evita invertir la dirección únicamente para equilibrar la imagen.

Prueba el zoom del navegador y el aumento del texto; vuelve después a cada control con el teclado. Busca bordes cortados, botones fuera de su padre o etiquetas separadas de su campo. Comprueba resultados vacíos, carga y error sin cambiar el orden básico de navegación. Los controles deben seguir siendo identificables aunque cambien los datos.

Registra cada fallo con anchura, texto y resultado esperado: «A 360 píxeles CSS, Nuevo proyecto desde plantilla queda parcialmente oculto; debe bajar o permitir un salto interno». Esto ofrece una condición de aceptación reproducible, mucho más útil para implementar la corrección que una indicación estética como «mejorar el móvil».

1. Empieza con el buscador vacío y alcanza todas las acciones con el teclado. Anota si el indicador de foco resulta completamente visible.
2. Introduce la consulta realista más larga y repite el recorrido. Comprueba que campo, etiqueta y botones vecinos permanezcan dentro de la página.
3. Sustituye la acción corta por Nuevo proyecto desde plantilla. Observa tanto el salto entre botones como la etiqueta dentro de cada uno.
4. Abre la página completa con barra lateral, resultados y cabecera. Confirma que ningún antecesor recorte la segunda fila al aumentar la altura de la barra.

Usa EmviUI como punto de partida visual

La web de EmviUI presenta un kit editable de Figma y un sistema de diseño. Utiliza sus ejemplos de controles para establecer un lenguaje visual coherente antes de implementar la barra. La imagen siguiente es una muestra de grupos de botones de EmviUI: no representa el ejemplo ejecutándose en Tailwind ni demuestra que su adaptación esté implementada.

Elige el tratamiento de botón adecuado a la jerarquía de la tarea, sustituye las etiquetas de muestra por acciones reales y dibuja las disposiciones estrecha y amplia. Conserva visible la etiqueta del buscador. Anota qué región crece y si el texto puede saltar de línea para que la implementación no se deduzca únicamente de posiciones en píxeles.

EmviUI puede aportar el punto de partida del diseño; tu aplicación sigue necesitando controles nativos, lógica de búsqueda, gestión del foco y comprobaciones en el navegador. Para distinguir recursos visuales reutilizables de decisiones mantenidas como sistema, consulta UI kit frente a sistema de diseño.

Entrega un registro breve con distribución base, transición amplia, regla del buscador, saltos del grupo de acciones y etiqueta más larga aprobada. Adjunta los fallos estrechos que corregiste. Repite esas muestras cuando una traducción, un icono o una barra lateral cambie el espacio disponible. El contrato adaptable resulta útil cuando otra persona puede repetir sus comprobaciones.