Как растянуть блок на всю высоту родителя?

Question

[Spaceoddity]

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

Comments

[Rustam Bainazarov]

Жуткая структура. W3C, flex и анимации тут не причем. Просто вы некорректно используете технологии.

[Spaceoddity]

Рустам Байназаров, серьёзно? Признайтесь честно, что просто не знаете. А то опять демагогия пошла...
Я из кода просто лишнее выкинул, чтобы пример не захламлять.

[Rustam Bainazarov]

Spaceoddity, понятно, что вы на понт взяли, но это не отменяет моих слов, потому что у вас хаос и непонимание технологий в коде.

Если много всего:


Если мало всего:


Spaceoddity, ну а если вам там что-то по высоте нужно ограничить в зависимости от viewport'a и сохранить прокрутку только одной области:


Так что ищите нужный вам вариант и дорабатывайте вам код, ибо скорее всего я не до конца понял вашей задачи.

[Spaceoddity]

Рустам Байназаров, риторический вопрос - объясните, откуда у многих веб-девелоперов так развился снобизм? Т.е. вы не ответили на конкретный вопрос, вы даже не поняли для чего там ТАКАЯ структура, но сразу с ходу обозвали оппонента ослом и стали учить его каким-то азам... Или вы думаете вокруг все глупее?

Объясняю на пальцах:
элементы красного блока должны быть внутри элементов синего блока! Потому что они должны появляться по ховеру. Именно поэтому они абсолютно спозиционированы относительно родителя синих элементов. При этом красный и синий блок должны тянуться минимум на всю высоту вьюпорта. А если какой-то из блоков превышает высоту вьюпорта, то второй должен растягиваться на ту же высоту.

[Rustam Bainazarov]

Spaceoddity, снобизм проявили вы, обвинив W3C в грехах, когда они ни в чем не виноваты. Засим, я и ответил на это. Ну а так -- да, мы сволочи.

Почему красные элементы должны быть внутри синих, чтобы они появлялись при наведении?

Вот этот эффект безо всяких абсолютных позиционирований:

[Spaceoddity]

Рустам Байназаров, ну а вот теперь попробуйте по красному элементу кликнуть))

[Spaceoddity]

Qlink, нет. Всё немного не так. У синих элементов высота фиксированная. Блин, проще показать.

Вот так было в дизайне. А теперь представьте что подпункты по высоте не влезают во вьюпорт - и вы сразу получите кучу проблем.