Антон Антон

https://codepen.io/FragsterAt/pen/NPWYpXb

.global-catalogue-menu-wrapper .first-level-menu .submenu-wrapper имеет высоту 100% и распирает контейнер от пункта "столы". Но даже если убрать - из-за третьего уровня меню столы->вешалки все равно останется свободное место, хоть и меньше. Нужно использовать абсолютное позиционирование и вычисление положения относительно экрана. Может быть какую-то библиотеку. Что использовать в данном случае - порекомендовать не могу. Сам использую vue + quasar - там попапы открываются +- нормально.

У красного и зеленого вместо width используй flex-basis

Гриды это круто!
И tailwind - тоже )) https://play.tailwindcss.com/C7T0WfGfdE

upd: для обхода

Т.е. обёртку box2 удалять нельзя.

есть display:contents https://play.tailwindcss.com/ZwIMd9HqpI

Добавь ему margin-right -1px и противоположному - margin-left

кажется, тут нужен svg
https://medium.com/@nikolskayaolia/an-easy-way-to-...

часть контента видна а часть нет

Значит дело не в display, а в width и height

Можно попробовать вернуться к истокам https://codepen.io/FragsterAt/pen/VwJqVbx

а вообще можно выкинуть row и сделать grid https://codepen.io/FragsterAt/pen/xxomQLX

как-то так: https://play.tailwindcss.com/WEGZIVoW3p

Нужно просто обернуть все еще раз.

<div> <!-- Высоту этого дива меняем -->
<div> <!-- Высоту этого дива вычисляем при изменении контента или ширины и используем её для всех аккордеонов рекурсивно -->
content
</div>
</div>

Используй сборщик, который автоматически соберет svg sprite из svg из папки и вставит в html. Для статических страниц подходят способы отсюда: https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Для всяких spa, собираемых vite и webpack также есть плагины.

Если не хочется расставлять переносы руками, то можно применить hyphens: auto; + lang="ru"