Tengo tarjetas con un título, una breve descripción y un botón.
Ahora no solo quiero tener toda la tarjeta a la misma altura que las otras tarjetas a su alrededor, sino también que todos los títulos, todas las descripciones y todos los botones tengan la misma altura.
No puedo conseguir que funcione. Hacer que todas las tarjetas tengan la misma altura con flexbox es bastante fácil, pero lograr que todas las partes tengan la misma altura no lo es.
Por ejemplo, para el título, no puedo hacer que tenga una altura fija porque los títulos tienen una longitud dinámica y podría ser que algunas tarjetas tengan una sola línea mientras que otras tienen varias.
¿Alguna idea de cómo podría hacer esto fácilmente?
Editar: aquí hay un código que ya tengo (simplificado, por supuesto)https://codesandbox.io/s/stoic-snowflake-z6n1h?file=/index.html
Pensé en una solución similar a este complemento de directiva angular, con la esperanza de que pudiera lograrse sin el uso de JS. Además, no uso angular en el proyecto donde necesito esto.
Puede intentar diseñar las tarjetas para acomodar un cierto tamaño de contenido y luego puede usar overflow:hidden; text-overflow: ellipsis; Propiedades CSS para recortar los valores extra largos. También podría implementar algunos límites estrictos en su back-end o sistema de edición para obligar a los usuarios a ser creativos.
Desde un punto de vista de UX, también podría considerar agregar botones o estados de desplazamiento que permitan al usuario ver una vista ampliada.