Flexbox: как сделать наполнение корпуса карты, а нижний колонтитул выровняется по картам (USWD) ⇐ Html

[Anonymous]

Я использую карты USWDS (U.S. Web Design).
Каждая карта имеет: < /p>

Синий корпус (раздел цитаты) < /p>
< /li>
Белый нижний колонник (содержание наложения) < /p>

< /> < /ol>

< /ol>



< /ol. Чтобы заполнить доступное пространство и белый нижний колонтитул, чтобы всегда выровнять нижнюю часть карты, так что все нижние колонтитулы карт равномерно выстраиваются в ряд. 3 карты, которые должны быть смещены. I have also attached screenshot so you can see what I am referring to.

Код: Выделить всё

/* Simulated USWDS utilities */
.display-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-align-start { align-items: flex-start; }
.flex-fill { flex: 1; }
.flex-auto { flex: 0 0 auto; }
.margin-top-auto { margin-top: auto; }
.height-full { height: 100%; }

/* Just for visuals */
.usa-card__container {
border: 1px solid #ccc;
border-radius: 4px;
background: #f0f8ff;
height: 100%;
}
.usa-card__body {
background: #003366;
color: white;
padding: 1rem;
}
.card-overlay {
background: white;
padding: 1rem;
}
.grid-container {
display: flex;
gap: 1rem;
}
.grid-col {
flex: 1;
}< /code>
Card Flexbox Issue





XYZ

[icon]
Short quote.


[h4]Footer 1[/h4]
Some footer text.









ABC

[icon]

Much longer quote that takes multiple lines and pushes the footer down more.



[h4]Footer 2[/h4]
Some footer text.









XXX

[icon]
Medium-length quote that should still align the footer.


[h4]Footer 3[/h4]
Some footer text.
Some footer text.
 
Some footer text.
 
Some footer text.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ards-uswds