Ширина дочерних элементов flexbox

Есть пример верстки. При изменении размеров окна все, как и полагается, у тегов изменяется ширина и меняется их количество на строке.
Но если в последней строке элементов меньше, чем в предыдущих строках, то данные элементы растягиваются.
Возможно ли сделать так, чтобы в последней строке ширина соответствовала элементам из предыдущих строк.
P.S. Для наглядности. Сейчас, как на красных блоках, a хотелось бы как на зеленых
P.S.S С помощью JS как это сделать знаю, интересует именно СSS.
B.addEventListener("click", add); C.addEventListener("click", take); function add() { A.style.width = A.offsetWidth + 50 + "px"; } function take() { A.style.width = (A.offsetWidth - 50) + "px"; } .work { display: flex; min-width: 67.5em; max-width: 96em; min-height: 55em; /*-----*/ font-size: 4px; padding: 3.75em; background-color: hsla(0, 0%, 100%, 0.7); box-sizing: border-box; } .faculty { display: block; /*-----*/ background-color: #F0E68C; } .container_link { display: flex; flex-direction: row; flex-wrap: wrap; } a { min-width: 5em; flex: 1; display: block; /*-----*/ font-size: 2.25em; margin: 1.3em 0.5em 0; background-color: hsla(0, 0%, 90%, 1); text-decoration: none; border: 1px dashed #3B8686; padding: 0.83em; }

1 2 3 4 5

Ответ

То, чего вы хотите добиться средствами чистого CSS, возможно, но флексбокс тут не поможет, потому что он одномерный и для полноценной сетки не годится. Воспользуйтесь для этого display: grid, а браузерам, которые не поддерживают, подсуньте ваше JS-решение.
Вот небольшой пример сетки, не нужны даже медиа-выражения (разверните на весь экран и подвигайте край браузера):
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px 10px; background-color: black; } .grid__item { background-color: red; height: 40px; }