1. Во-первых, у вас стили указаны для элемента с классом .section, а у вас секция без класса, т.е. если стили для нее, то должно быть просто section {...тут стили...}
2. Зачем вообще использовать абсолютное позиционирование?
Если на флексах, то вы должны задать ширину элементам флекс-контейнера, ибо в зависимости от контента, каждая последующая строчка может "поплыть".
Если вас устроит одинаковая ширина для всех, то просто задайте дочерним элементам флекс-контейнера свойства:
.pon, .card_item > div {
flex-basis: 0;
flex-grow: 1;
}
Если у вас CMS какая-то, то укажите в задании её, если самописаное решение какое-то, то в зависимости от того, на чем сделан бэк сайта, требовать знания этих языков программирования/фреимворков и тд.
Да, нужен также HTML. Еще лучше, если зальете код в песочницу, например codepen и ссылку сюда, а также напишите, что именно вас не устраивает в мобильной версии?
Согласен с комментом выше, но если требуется такое решение, то нужно:
1) Убрать display:flex; у ul, с ним вы такое реализовать не сможете. Задайте просто display:block;
2) Элементам li задать display:inline;
3) У a убрать word-break:break-all;
Константин, получается, что вы хотите сделать так, чтобы высота дочерних элементов flex-контейнера равнялась минимальной высоте этих элементов. Без js этого достичь не получится, разве что задать фиксированное значение.