Антон Антон

можно начать отталкиваться от такого:
https://codepen.io/FragsterAt/pen/Byoxaga

Если есть возможность указать фон у thead и tbody, то эта задача решается не скроллом body, а position: sticky у thead и tfoot: https://play.tailwindcss.com/AFbTjPofBw (в примере фон полупрозрачный специально)

либо как-то так https://codepen.io/FragsterAt/pen/QwwxEMj
либо, если высота блоков должна быть независима, гуглить масонри, columns и прочее, гридом такое не сделать.

Это из-за того, что скролл не у window, а у вложенного элемента, его и надо скроллить. Есть замечательная вещь https://developer.mozilla.org/en-US/docs/Web/API/E... которая работает независимо от того, что скроллится, в том числе для нескольких вложенных скроллов. Можно с её помощью скроллить до какого-то элемента наверху. Еще может пригодиться (не все знают) https://developer.mozilla.org/en-US/docs/Web/CSS/s... и https://developer.mozilla.org/en-US/docs/Web/CSS/s...

grid-template-areas: 
    "a a b c"
    "d e e f";

но вообще многовато лишнего, например grid-template-rows и -columns не нужны, если размеры жестко зашиты и есть areas
или если с ними, то достаточно grid-column: span 2 / span 2; на соответствующие ячейки: https://play.tailwindcss.com/TFCFv701GP

если надо подменить весь флекс блок, то костылем может быть заворачивание всего в iframe:

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

может быть это поможет: https://developer.mozilla.org/en-US/docs/Web/SVG/R...

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