Растягивание левого блока по высоте правого, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте.
Как реализовать? растягивание левого блока по высоте правого.

Левый блок текст и скрол.
Правый блок, 4 блока новостей, у новостей разная длинна заголовка, а значит блоки то выше то ниже.

Вот и хочу сделать чтобы левый блок растягивался по высоте правого, чтобы было все ровно и красиво.

Вид всего этого:
Код в действие пощупать можно тут:
https://jsfiddle.net/hqtepdwg/5/

Answer 1

[Сергей delphinpro]

Буду краток: jsfiddle.net/e2x8fd4L

Comments

[Ankhena]

вот ведь, на секундочку не успела https://jsfiddle.net/zLokq5mj/

[Сергей delphinpro]

Ankhena, ну у вас другой подход. так что успела )

[Антон Вебсайтовский]

Ух то что надо ), шедевр )

[Антон Вебсайтовский]

Ankhena, так ! ты борщ приготовила? а то опять не своим делом занимаешься.

[Антон Вебсайтовский]

А какой из ваших 2 методов более рабочий так сказать, работают-то оба, это круто ! то что надо.
Но что насчет версий браузера.

grid-column и т.д, для более современных браузеров.

display: flex; - вроде работает и на старых.
flex-shrink: 0; - насчет этого не знаю, первый раз вижу.

[Сергей delphinpro]

Антон Вебсайтовский, вся разница в "более рабочести" здесь
https://caniuse.com/#feat=flexbox и https://caniuse.com/#feat=css-grid

[Антон Вебсайтовский]

Сергей delphinpro, спасибо, ага хороший ресурс.
Так по тестам, выходит что лучше делать на CSS Flexible.
У грид поддерживаемых браузеров не так много.

[Ankhena]

Антон Вебсайтовский, вариант Сергея целесообразнее. С гридами сложнее.

[Антон Вебсайтовский]

Пытаюсь щас внедрить метод твой, без особых изменений.
Блоки оставить как у меня есть, но растяжение левого блока поставить как у тебя.

[Антон Вебсайтовский]

Что-то странно, вставил на сайт и все вообще не так, пытался совместить со своими блоками тож все кривое.

[Антон Вебсайтовский]

Ankhena, Суть не в сложности, а чтобы работала в разных браузерах !

[Сергей delphinpro]

Антон Вебсайтовский, Суть в том, что две колонки находятся во флекс контейнере и за счет align-items:stretch (это значение по-умолчанию) они равной высоты.
Чтобы длинный контент первой колонки не растягивал саму колонку (а он будет растягивать даже с overflow-hidden), этот контент расположен в блоке, выдернутом из общего потока абсолютным позиционированием. И растянут на всю область левой колонки.
Для мобильников абсолютное позиционирование и флекс-раскладка убирается, и все встает в одну колонку.

[Сергей delphinpro]

Антон Вебсайтовский,

flex-shrink: 0; - насчет этого не знаю, первый раз вижу.

Запрещает колонке уменьшаться меньше заданного значения (width или flex-basis)

[Антон Вебсайтовский]

Сергей delphinpro, спасибо понял, я пытаюсь на свой пример переделать и внедрить и чет не выходит, странно. Осталось ток мои блоки вставить с новостями. Но пока чет не але.

[Антон Вебсайтовский]

Проверял для примера, просто скопировал весь твой код.

[Антон Вебсайтовский]

Сергей delphinpro, так у тя же в коде

[Антон Вебсайтовский]

Сделал под свои блоки, поправил и внедрил твой код. Все работает, щас поправлю чутка ).