Вероятно, забыли намекнуть браузеру, а какого размера она должна быть.
И пока не поздно, переходите с символьных спрайтов на стеки из svg. И вставляйте их в css (ну или куда угодно, без ограничений символьных). Жизнь покажется ярче.
Разрешить svg менять пропорции preserveAspectRatio="none"
Убрать к черту псевдо (ну просто потому что бесит и не ясно зачем он там).
Считать на js пропорции в зависимости от размера блока и ставить в отступы (точнее в координаты p).
Причем, мне кажется, абзацу как раз потребуется абсолют, чтобы не получить круговую зависимость.
С другой стороны, в таких блоках обычно не предусматривается переполнение.
Alexander, песочницы это сервисы типа codepen.io, чтобы не компилировать ваш код в голове.
Также не имеет смыл показывать всякий не относящийся к проблеме мусор.
Показывайте в песочнице только один блок и только необходимые стили.
1. Для .faq вообще не задан флекс (зато зачем-то задан флоат)
2. Внутри элементы лежат не россыпью, а разбиты на три div. С какой целью? Так ничего не выйдет, убирайте.
frontAng, что именно? Если вас устраивает как работает, то и норм.
А я даже не знаю, что в макете и тз. Подозреваю, что нужен js и кажется, довольно затейливый.
Вероятно, забыли намекнуть браузеру, а какого размера она должна быть.
И пока не поздно, переходите с символьных спрайтов на стеки из svg. И вставляйте их в css (ну или куда угодно, без ограничений символьных). Жизнь покажется ярче.