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