Доброе время суток всем, гуру верстки подскажите пожалуйста как быть в такой ситуации?
У меня есть блок с малым контентом он
выглядит так.
.text-block-3 растянут на всю высоту до конца экрана за вычетом блоков
.text-block-1 .text-block-2 .text-block-7
Тут как бы все гуд, я выделил его желтым цветом можно видеть что он растянут правильно.
В этом блоке есть контент
.text-block-4 .text-block-5 .text-block-6 беда начинается когда контента много.
Пример - он растягивает блок к низу экрана, чего быть не должно.
Если
.text-block-3 принудительно поставить скролинг, то это не решает проблему, единственное что решает проблему этом max-height - но какой его ставить я не знаю, т.к. блок прижимается к низу экрана на больших мониторах, а они все разные по высоте. Как вычислить высоту на CSS я не придумал, потому что высота контента сверху не известна. и
считать от размера просматриваемой области VM не правильно.
Есть конечно кастыль, узнать высоту блока на JS пока он пустой, зафиксировать ее в PX и потом заполнить контентом, тогда будет скролится. Но я бы не хотел делать такой кастыль, я уверен что есть способ на CSS как можно сделать подобное поведение.
Коротко: если контент выходит за блок
.text-block-3 он должен скролится, высотка контента сверху (container flex-grow-1 d-flex mt-2) [все что выше] не известна. А высота должна оставаться как в первом примере.