Как решить проблему с max-height и flex-column?

Question

[David Halkin]

Здравствуйте, знатоки! )

https://codepen.io/northfire/pen/xxPZQOw

Главный родитель может и будет переполняться. У него нужно иметь max-height , но при этом когда пошло переполнение, должен появляться у .content - скрол. В данным момент работает лишь когда у родителя фиксированно задан height. Есть ли идеи как сохранить "резиновость" по высоте , но и при этом при переполнении что бы был скролл?

P.S> вопрос разрулен гридам(спасибо за решение!) . но можно и флексом(есть мелкий баг в фф) https://codepen.io/northfire/pen/xxPZQOw

Answer 1

[Ankhena]

Да что за напасть?
Не нужно делать это абсолютами
https://qna.habr.com/q/1107394
https://qna.habr.com/q/1102624

Comments

[David Halkin]

с гридом хороший подход. но не везде поддерживается "min-content" и при удалении "header" , "content" должен заполнять остаток пространства макс-хейта. в данном случае именнно такой хак по гриду - не актуален

[Ankhena]

David Halkin,

но не везде поддерживается "min-content"

Где не везде он не поддерживается, там где в принципе поддерживаются гриды?

при удалении "header" , "content" должен заполнять остаток пространства макс-хейта.

Ох, как я люблю эти выплывающие из ниоткуда дополнения. Когда вы писали вопрос, были не в курсе об этом обстоятельстве? Какие ещё условия?

Задайте второму блоку grid-row: span 2;

https://jsfiddle.net/6k70cj8o/

[David Halkin]

Ankhena, Safari on iOS , Safari вот там и не поддерживается, по кррайней мере так пишет caniuse.

[Ankhena]

David Halkin, а вы точно смотрите его в свойстве grid-template-rows? А ещё лучше в реальном сафари?

[Ankhena]

David Halkin, ау? Проверили в сафари?

[David Halkin]

Ankhena, прошу прощенья) заработался. вроде бы пашет. я ещё флексами разрулил, но в фф есть странный баг "залипания" скрола при ресайзе. пока оставил ваш вариант. спасибо!

[Ankhena]

David Halkin, отмечайте решениями все варианты которые могут помочь и другим с такой же проблемой. Потому что ваш такой вопрос был уже далеко не первым. Может хоть кто-то поиском найдет.

И свой вариант на флексах тоже имеет смысл опубликовать и тоже отметить.

[David Halkin]

Ankhena, готово!)

Answer 2

[Danny Arty]

Вам в любом случае придется задать height, либо использовать position: relative и position:absolute для соответствующих блоков.
Потому что в текущем случае высота внешнего блока, т.е. .test вычисляется по содержимому, поэтому задать в % высоту для его дочерних блоков не получится - она автоматически будет считаться как height: auto.

Answer 3

[Vyach Gor]

Не так давно, попал на довольно интересный и неочевидный метод, решения похожего вопроса

Comments

[Ankhena]

И где скролл при переполнении?
Вы не промахнулись вопросом?

[Vyach Gor]

Да так и есть - про скролл момент не заметил)

[David Halkin]

Vyach Gor, дааа, мметод интересный. когдато была такая методика "выравнивания по высоте" с псевдоэлементом