Уже такое зло на этот W3C берёт... Флексбоксы и гриды они придумывают, тучу анимаций добавили, а с этими детскими болячками ничего до сих пор путного не могут придумать.
И так, и сяк пробовал...
https://codepen.io/nanto-work/pen/rEGeNg
Нужно чтобы синяя колонка растягивалась на высоту красной. Тут в принципе не критично что она именно будет растягиваться. Надо просто чтобы одна часть была синяя, а другая красная (ну и бордер между ними). Синяя должна быть минимум на высоту вьюпорта, максимум до высоты красной (если она больше, а высота красной может меняться - но тоже минимум на высоту вьюпорта).
Псевдоэлементы не проблема, а вот позиционировать "testblock__leftcol" нельзя - позиционирование красной тогда слетит.
Вся проблема в скролле. На 100% высоты растягивать в принципе тот ещё квест. Но если overflow:auto... У меня даже обёртку не получилось использовать (чтобы ограничение скролла обойти) - тогда синюю колонку приходится позиционировать.
Простой
Средний
