Почему мой гибкий элемент выравнивается вправо, а не снизу? ⇐ CSS

[Anonymous]

Смотрите эту скрипку, я не могу изменить HTML, только CSS. Как я могу получить его там? Lang-CSS PrettyPrint-Override ">

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

      * {margin:0;padding:0;}

.placeholder {
object-fit: contain;
height:14vh; min-height:10em;
background:#8af;
}

ul {
grid-template-columns: 1fr 1fr 1fr 1fr;
background:#ffc;
display: grid;
gap:1em;
list-style-type: none;
}

@media only screen and (max-width: 1024px) {
ul {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (max-width: 768px) {
ul {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 320px) {
ul {
grid-template-columns: 1fr;
}
}

li {
height:28vh; min-height:20em;
border:1px solid #000;
margin: 2px;
display:flex;
flex-direction: column;

}
.button {
background-color:#ae9962;
display:block;
align-self:flex-end;
}

h2 {
flex-grow:1;
background:#f00;
}< /code>
[list][*]
Item1-Title99€test
[*]
Item2-Title99€test
[*]
Item3-Title99€test
[*]
Item4-Title99€test
[*]
Item5-Title99€test
[*]
Item6-Title99€test
[*]
Item7-Title99€test
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -of-bottom