Можно ли автоматически высчитывать max-height на css?

Question

[aftar]

Добрый день! Допустим есть такая форма, нужно чтобы текст занимал всю оставшуюся высоту и если не влезает появлялся скролл.
Знаю, что для этого нужно прописать свой-во max-height.
Но проблема в том, что заголовок...динамический, и в одном случае может например занимать 50, в другом 100px. Поэтому высчитать не получится.

Растянуть его конечно можно с помощью св-ва flex-grow, но нужен max-height.
Может кто сталкивался с этим и знает фичу как можно сделать.

Comments

[Ankhena]

Может кто сталкивался с этим и знает фичу как можно сделать.

Угу. Гриды с этим прекрасно справляются.
Кажется, на прошлой неделе писала ответ (ну или комментарий) к аналогичному вопросу.

[aftar]

Ankhena, ок, спасибо. буду смотреть

[Mikhail Osher]

Демку на codesandbox можно?

[aftar]

Mikhail Osher, спасибо. но уже вроде как нашел решение

[Ankhena]

Вот ближайший аналог вашего вопроса https://qna.habr.com/q/1102624

Answer 1

[aftar]

В общем делаем обертку текста, добавляем flex-grow (чтобы занимал оставшуюся высоту), relative.
И сам текст вешаем абсолютом.

Comments

[Ankhena]

Ну нет, ну не надо абсолютами
Вот ближайший аналог вашего вопроса https://qna.habr.com/q/1102624

[aftar]

Ankhena, да, действительно. спасибо
https://codepen.io/hivoina-a/pen/oNojmzN
там и мой способ и ваш

[aftar]

Ankhena, а подскажите еще, пожалуйста, можно что-то придумать, если текст будет еще в одной вложенности?

[Ankhena]

aftar, не вижу глобальной разницы.
Покажите песочницу и расскажите, что не получилось и в чем проблема.

[aftar]

Ankhena, https://codepen.io/hivoina-a/pen/oNojmzN

3 форма

[Ankhena]

aftar, что-то у вас там каша какая-то.
Вы grid-template-rows от балды задаете?
У первых форм по 5 детей, вы пишете, что у грида 2 строки.

У третей формы и правда два ребенка, но вы пишете min-content 1fr. Хотя это второй ребенок должен взять столько места, сколько ему нужно и всё оставшееся отдать первому.
А потом для wrapper пишете, что у него grid-template-rows: min-content;.
Я вижу у него 4 детей.
Да, грид, конечно, и сам добавит недостающие строки, но в чем смысл-то?

Но начать имеет смысл с ответа на вопрос, зачем в третей форме вообще wrapper.

Итого:
1. Разобраться со строками гридов.
2. Выяснить необходимость wrapper.
- если нужен, задать ему overflow hidden
- если не нужен, удалить или задать display contents

p.s. почитайте про box-sizing, а то у вас инпуты вываливаются.

[aftar]

Ankhena, понял, спасибо, получилось!
делал просто в торопясь, забыл прописать box-sizing.

в примере wrapper ни к чему, но в настоящем примере такая разметка.
с гридами просто не работал, поэтому не особо их понимаю.

[Ankhena]

aftar, прочитайте спеку и пройдите игру grid garden (гугится). Игра на полчаса.
Что делать с этой оберткой я написала.

[aftar]

Ankhena, окей, спасибо!
также спасибо за предыдущий развернутый ответ)
с оберткой я разобрался.

Answer 2

[Олег]

попробуй не пикселями, а в процентном соотношении - пример - max-height:10%;

Comments

[aftar]

это не поможет. с пикселями я привел пример. что другой контент может отличаться по высоте.
и этот текст, который в случае должен скролиться, должен занять всю оставшуюся высоту.

Answer 3

[Aleksandr Zakordonnyi]

К блоку с тестом пропишите класс overflow-y: auto;

Comments

[aftar]

это само собой)