DZHAMBUALT,
Хорошо сформулированный вопрос залог успеха. Пока не понятно, какой блок куда не растягивается. Вы сказали, что body 100vh и соответственно, красный блок тоже. Первый div 150vh. В браузере так и вижу. Что именно не так?
А вешать overflow на body, во-первых, дурной тон, во-вторых, на мобилках по крайней мере в части браузеров не сработает.
Отличный вопрос, содержащий в себе ответ.
Вы задаете псевдику ширину 100%. Чтобы эта ширина в итоге оказалась по контенту, то и родительский li должен быть не на ширину списка, а по контенту.
А ширина контента это width: fit-content.
Либо за счет свойств родительского флекса.
Ещё, у вас нет никакой анимации и не ясно зачем вообще псевдо, можно просто задать фон для li.
Кстати, в современном мире не нужен спан для стилизации чекбоксов и радио. Из можно задать appearance: none и дальше стилизовать напрямую.
А даже если их по-старинке скрывать, то всяко не через display: none, а доступно с помощью visually-hidden (гуглится)
Самый простой способ, если лениво читать теорию, открыть всё это дело в браузере и посмотреть. Будет 200х150.
Как думать:
1. Узнать что там с box-sizing будет в итоге. Которое из значений останется.
2. Аналогично разбираете про border и padding. Которые из значений применятся по каскаду.
3. Понять влияют ли они на размеры исходя из результатов п.1
4. Посмотреть какие свойства влияют на высоту: тут высота и максимальная высота. Выяснить кто победит, учитывая, что значения с виду противоречат другу другу. Не забыть про результат п3.
5. Аналогично с шириной.
Три колонки, три строки. Большие карточки занимают по 2 строки (span 2).
Что именно у вас не получилось?
Если нужно, чтобы повторялось, то соответственно, через nth-child.
Тут, наверное, два глобальных варианта:
1. Делать минимальную песочницу с иллюстрацией проблемы.
2. Самостоятельно смотреть в стили.
Из того, что вы пишете видно, что картинка и её блок должны быть квадратными. Но на скринах всё не так. Значит, какие-то ещё стили влияют на это поведение. Но их вы нам не показали.
Alina1984, Ну как так-то?
В песочнице png, на гитхабе svg.
SVG по умолчанию не меняет пропорции, что бы ему не указывали в размерах. Чтобы изменить это поведение, нужно задать атрибут preserveAspectRatio="none"
А теперь добавьте это в песочницу.
Потому что, когда это делаю я, то получается всё как нужно.
И судя по комментарию выше, так получается не только у меня.
p.s.
1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент.
2. И всё таки это не контентная картинка. Alt waves даром не сдался ни пользователям скринридеров ни хозяевам сайта для продвижения. Такие картинки либо убирают в стили (лучше) либо скрывают от скринридеров с помощью aria-hidden. И, соответственно, убирают alt (оставляют пустым)
3. Глаже будет SVG
Aleksey Solovyev,
1. Мусор. В разметке должен быть смысл. А украшения в стилях.
2. Лишний элемент в DOM. Пока он один на простой странице это не страшно. (Я как-то удалила больше 10 тысяч лишних оберток со страницы лендинга, хозяева которого жаловались на тормоза)
3. Велик шанс того, что он будет удален из разметки другим разработчиком. И это логично, он ведь пустой.
Использование пустых тегов вместо псевдоэлементов один из признаков плохого кода.
А в данном случае даже псевдоэлемент не нужен, если я правильно понимаю задачу автора. Но раз отметил решением, видимо, правильно.
Виталий Першин, Виталий, если в браузере установлен минимальный размер шрифта, то при вашем варианте он не уменьшится ниже этого значения.
Чтобы точно это увидеть, можно поставить утрированное значение.
Я только про это.
А не про идею автора уменьшать блок пропорционально высоте. Она очевидно плохая.
Вы хотите противоречивого поведения в случае, когда одна строка и когда две, поэтому либо с девятками либо перестраивать через media (но тут надо знать ширину перестроения, с учетом ширины кнопки).
Вы точно не забыли настройку минимального размера шрифта?
Для FF нужно делать нормальную страницу, а не песочницу. (По крайней мере у меня только так вышло в FF, в Хроме и так и так)
Хорошо сформулированный вопрос залог успеха. Пока не понятно, какой блок куда не растягивается. Вы сказали, что body 100vh и соответственно, красный блок тоже. Первый div 150vh. В браузере так и вижу. Что именно не так?
А вешать overflow на body, во-первых, дурной тон, во-вторых, на мобилках по крайней мере в части браузеров не сработает.