Faire flex enfant égale hauteur d'un parent à l'intérieur de la colonne de la grille
Je suis en train de construire un tableau de tarification où chaque colonne contient une carte. Je veux toutes les cartes pour l'étirer à la hauteur de leurs parents.le col) éléments.
Note: je suis en utilisant Bootstrap 4, et d'essayer de réaliser cela avec le réseau existant du système (par souci de cohérence) et avec ce morceau particulier de balisage. Je ne peux pas obtenir les cartes de grandir à la hauteur de leurs conteneurs parents. Est-ce même possible avec le balisage?
La base de balisage est-ce:
<div class="row">
<div class="col">
<div class="card">
blah
blah
blah
</div>
<div class="card">
blah
</div>
<div class="card">
blah
</div>
</div>
</div>
Voici ma plume: https://codepen.io/anon/pen/oZXWJB
Vous devez vous connecter pour publier un commentaire.
Ajouter
flex-grow : 1;
à votre.card
règle. Balisage HTML est bien.Vous pouvez également consulter Fondation 6 Égaliseur plugin. Ils utilisent JavaScript si.
Juste ajouter
flex: 1
à votrecard
classe. Devrait être suffisant. Et vous n'avez pas besoindisplay: flex; align-items: stretch; flex-direction: column
dans cette classe.Vous avez juste besoin d'ajouter
height: 100%
sur.card
DÉMO
Ajouter de la hauteur: de 100% à .carte
exemple - https://codepen.io/anon/pen/zZGzyd
Suffit de faire votre
.card
hauteur de 100%.Si vous êtes en utilisant Bootstrap 4, ils ont déjà construire-dans des classes pour ce que vous essayez d'atteindre.
Ajouter
card-deck
à<div class="row card-deck">