Руслан, вытащите кнопку из ссылки.
Либо вытащите и ссылку и кнопку.
Дальше гридами или абсолютами.
Макета нет, поэтому сложно сказать конкретнее.
Если лень читать спеку, что во что можно вкладывать, то вот сервис https://caninclude.glitch.me/
Да и валидатор всегда подскажет, если творите что-то не то.
- блок флексом, column
- выясняете сколько элементов
- делите пополам
-- если нечетное, решаете что с этим делать
- выясняете высоту половинок и максимальную из них
- задаете эту высоту флексу
-- если высота первой меньше, чем высота второй, дополняете высоту первого столбца чем-нибудь, например, псевдоэлементом.
Либо аналогично, но используя свойство колонок column-fill.
Это же надо так вопрос завернуть вместо того чтобы просто спросить почему дочерний элемент флекса не занимает всю доступную ширину родителя :)
Ну, потому что флексы так себя ведут. По умолчанию размер вдоль главной оси у флекс-элементов по содержимому.
Т.е.
- либо задайте ширину руками
- либо избавьтесь от обертки grid-2, задав этот класс вот этому элементу grid-1-item-2
- либо уберите флекс у grid-1-item-2
