Flex. Как «растянуть» последний элемент на всю оставшуюся высоту?

Question

[Rudy Dudy]

Привет всем.
Как можно "растянуть" с помощью флекса какой-то элемент?
Есть страница - Припустим 300 пикселей банер, после 200 пикселей какая-то информация о продукте, а после идет третий блок, он должен растягиваться на все оставшуюся висоту.
Пробивал stretch, align-self и т.д.
У меня уже есть сомнение возможно ли такое вообще сделать с помощью флекса?

Comments

[kulaeff]

Рекомендую к прочтению https://css-tricks.com/snippets/css/a-guide-to-fle...

Answer 1

[gleendo]

Demo (Codepen)
Demo 2 (Codepen)

Comments

[Rudy Dudy]

Спасибо большое!

Answer 2

[SuperToster]

Сорри, не внимательно вопрос прочитал : )
Исправил пример
UPD: https://jsfiddle.net/gdmn1vat/

Comments

[gleendo]

@SuperToster

...на всю оставшуюся высоту

К тому же, зачем писать стили если они по умолчанию и так такие?

// лишнее
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;

align-self: auto;
order: 0;

[SuperToster]

Спасибо за замечания, исправил : )

[Rudy Dudy]

Спасибо большое!

Answer 3

[Rudy Dudy]

Спасибо, работает, но не до конца, теперь нельзя проскролить страницу, если контента больше чем изначально.
Я просто делаю SAP на ангуляре. И есть страница с банером, текстом и гуглкартой. Я сделал все как в примере + ставил оверфлов скролл.
Я думаю что весь нюанс в flex-direction:column; - возможно как-то растянуть блок используя row?

Comments

[gleendo]

Zen Ter В смысле нельзя? Я вам и предоставил пример реализации с учетом того что контента может быть много. Чего конкретно вы хотите? Хотя бы нарисуйте, если толком словами изъясниться не можете...

[SuperToster]

https://jsfiddle.net/gdmn1vat/1/