Mettre des divs en colonne à la même hauteur

Bonjour à tous !

Je viens chercher un peu d’aide car pour un side project que je suis en train de développer (et que je présenterai bientôt), je suis face à bug CSS que mes maigres connaissances n’arrivent pas à résoudre.

Comme vous pouvez le voir sur la capture, j’ai un ensemble de div dans une colonne. Le problème, c’est que certains textes à l’intérieur sont plus longs que les autres et les cartes sont donc, par conséquent, plus hautes.

J’aimerais que toutes les div d’une colonne (une colonne peut être, comme ici, sur deux lignes, elle correspond en fait à une date) aient la même hauteur.

J’ai essayé plusieurs méthodes en CSS, mais rien qui ne marchait chez moi, probablement car je copie/colle sans trop comprendre.

Voici les CSS qui peuvent peut-être être utiles :

La CSS du container d’une tâche (donc d’un bloc de couleur dans la capture ci-dessus) :

.task-container {
    display: inline-block;
    float: none;
}

Quant à la ligne :

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

Pour info, c’est le framework Materialize CSS que j’utilise.

Merci d’avance de votre aide, et n’hésitez pas si vous avez besoin de plus d’infos, voire un accès à l’environnement de dev pour voir par vous-mêmes

Hello,

Malheureusement faire ça avec du positionnement classique est très compliqué, pour ne pas dire impossible (en tout cas proprement).

Heureusement… il existe flexbox qui permet de répondre à ce besoin !

En utilisant flexbox pour tes colonnes et les blocs dedans tu pourras gérer le remplissage des parents si besoin.

Tu peux le surcharger ainsi :

.row {
    display: flex;
    align-items: stretch;
}

Tu as ce pense bête qui aide bien pour les flex en CSS : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Merci pour votre aide à tous, j’ai réussi à pas mal avancer mais pas encore tout à fait ce que je veux.

Pour l’instant, j’ai ceci :

Comme vous le voyez, mes cartes sont étirées sur toute la longueur de la ligne. Y a-t-il un moyen d’éviter ça ? Globalement, j’aimerais limiter la taille de mes cartes à 15%.

Merci encore pour votre aide

Voici ma CSS actuelle :

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  display: flex;
  flex: 1 0 15%;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  padding: 24px;
  align-items: flex-start;
  cursor: pointer;
}

.baby {
  width: 100%;
}