Что я обычно делаю в таких случаях: прошу убрать пункты, которые меня не устраивают или предлагаю другие формулировки. А также прошу добавить те пункты, которые важны мне.
Ведь мы договариваемся о сотрудничестве на каких-то условиях.
Ну да, у флексов не бывает переносов без wrap. Вам чем-то не угодило это свойство?
А дальше разбираться с шириной блоков и заодно почитать про flex-shrink и flex-grow.
И про box-sizing не забудьте по дороге, чтобы не было сюрпризов.
Возможно, вам больше понравятся в этой ситуации гриды. Но из вопроса не совсем понятно что должны делать элементы на второй строке, как растягиваться.
Хорош бы вопрос формулировать так, чтобы было понятно что не так, как должно быть и почему нельзя wrap.
Вы тут первый раз задаете вопрос, поэтому рекомендую всё таки ознакомиться с правилами. Код скринами тут выкладывать нельзя. Либо кодом либо готовой песочницей на сервисах типа codepen.io или аналогах. Либо код в спойлер и ссылку на песочницу (вообще супер)
Но потом вам захочется закрывать его по клику мимо кнопочек (это можно сделать и таргетом, но это не модалка и пользователи могут и не захотеть закрывать эту панельку), закрывать нажатием на ту же самую кнопочку и подобное.
GeorgiyStepanov,
1. Прочитайте про тень.
2. Почитайте про работу позиционирования на MDN, Доке или любом другом удобном вам ресурсе.
Элементы с absolute позиционируются относительно ближайшего родителя с position отличным от static (т.е. если нужному родителю не нужно позиционирование, то это relative). Если такого родителя нет, то относительно окна браузера.
У img нет дочерних элементов, относительно него никого нельзя спозиционировать (ну кроме его псевдоэлементов, когда сама картинка недоступна)
GeorgiyStepanov, может, стоит relative задать тому, относительно кого позиционируете? Не от вьюпорта же вам нужно?
Картинку можно заменить на любую подходящую из сервиса заглушек (например, https://picsum.photos/) или из Яндекс картинок или со своего хостинга, если по https.
Но и сейчас этот псевдо никуда не сместится. Куда прибили, там и будет.
GeorgiyStepanov, about-us__container - этому грид на 2 колонки. about-us__content content-about-us - этого в помойку
Заголовку и подзаголовку сказать, что они на два столбца.
И jsfiddle работает в России только с VPN, так что если хотите увеличить количество желающих вам помочь, переходите на codepen.io или нормально открывающиеся аналоги.
Что я обычно делаю в таких случаях: прошу убрать пункты, которые меня не устраивают или предлагаю другие формулировки. А также прошу добавить те пункты, которые важны мне.
Ведь мы договариваемся о сотрудничестве на каких-то условиях.
Дальше по обстоятельствам.