Glexbox useify-content: Spaceween не работает должным образом с позицией: Absolute ⇐ CSS

[Anonymous]

Я сталкиваюсь с этой проблемой:
Я хочу использовать позицию: абсолютно, чтобы настроить span.materias__tem-detalle, в нижнюю часть div, не заботясь о том, что H4 занимает. Помогите мне?
Спасибо! < /p>
[Проблема] [1]
[1]: https://i.sstatic.net/9vwquikn.pngобразно class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

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

#materias_container {
padding: 2rem;
background-color: rgb(63, 71, 204);

#materias_lista {
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;

li {
list-style: none;

div.materias__item {
width: 390px;
height: 220px;
font-size: 20px;
border-radius: 12px;
border: 5px solid rgb(1, 74, 23);
background-color: rgb(35, 177, 77);
box-shadow: 6px 6px 6px black;
padding: 20px;
margin: 10px;
position: relative;

h4 {
margin-top: 10px;
}

span.estado_promocionada,
span.estado_cursando,
span.estado_pendiente {
display: block;
width: fit-content;
padding: 5px;
border-radius: 15px;
display: grid;
justify-self: flex-end;
border: 2px solid black;
}

span.estado_promocionada {
background-color: rgb(0, 251, 96);
}

span.estado_cursando {
background-color: rgb(229, 255, 0);
}

span.estado_pendiente {
background-color: rgb(89, 90, 89);
}

.materias__item-detalle {
width: 100%;
display: inline-flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 4%;
}
}
}
}
}< /code>

[list]
[*]

Promocionada
[h4]Técnicas de Programación[/h4]


Código: 1.1.1


[*]

Promocionada
[h4]Elementos de Análisis Matemático[/h4]


Código: 1.1.2

📚 Apuntes

[/list]

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