FlexBox collant de bas de page

Question

J'essaie d'obtenir plus ou moins la même chose de ce qui est décrit dans cette question:

• Align an element to bottom with flexbox

sauf pour le fait que je ne peux pas utiliser des hauteurs fixes .

J'ai mis deux cartes qui sont déjà dans un contexte flex (leurs hauteurs sont tendues avec FlexBox):

intérieur de la carte, j'ai une série d'éléments:

• un en-tête
• un corps
• un pied de page (le div bleu)

Ce que je veux, c'est que le pied de page colle toujours au fond.

Le récipient intérieur des trois éléments décrits ci-dessus ont le CSS suivant:

.card-inner { 
    display:flex; 
    flex-flow :row wrap; 
    align-items: stretch; 
} 

et les éléments ont à l'intérieur

.card { 
    &-header, 
    &-body { 
    flex: 0 1 100%; 
    } 
    &-footer { 
    flex: 0 1 100%; 
    align-self:flex-end; 
    margin-top: auto; 
    } 
} 

I se serait attendu à ce que align-self:flex-end ou margin-top: auto aurait poussé le pied div vers le bas de la carte, mais ce n'est pas le cas. Peut-être que les deux contextes flex ne parlent pas entre eux et ne sont pas liés? Ou peut-être sans une hauteur au conteneur interne, le contexte flexible se termine lorsque le flux de contenu se termine?

Existe-t-il un moyen d'y parvenir sans utiliser de hauteurs avec flexbox?

Voici un exemple codepen: https://codepen.io/vlrprbttst/pen/QgWbEr

Answer 1

Ajouter display: flex-.card. Cela permettra aux enfants d'utiliser la pleine hauteur de .container.

Il épingle également le pied de page vers le bas.

revised demo

---

Pour une plus complète solution (si nécessaire), vous devrez changer le flex-direction de .container-inner-column, et faire des ajustements aux éléments flexibles pour tenir compte de ce commutateur.

revised demo

---

La raison pour laquelle align-self: flex-end et margin-top: auto ne fonctionne pas a à voir avec les lignes flexibles dans un conteneur flexible sur plusieurs lignes.En raison de la façon dont align-content fonctionne, votre pied de page ne peut pas sortir de sa ligne de flexion et se déplacer vers le bas du conteneur.

Pour une description complète, voir ce post:

• How does flex-wrap work with align-self, align-items and align-content?