Определение высоты с помощью гибкого столбца и переполнения дочернего содержимого ⇐ CSS

[Гость]

Мне интересно, как сделать так, чтобы дочерний элемент (когда для гибкого направления установлено значение «столбец») занимал все оставшееся пространство внутри его контейнера. Я хочу, чтобы он расширялся до доступного пространства и вызывал полосу прокрутки, когда его содержимое превышает это пространство.

Сначала я думал, что использование 'flex-grow: 1;' сделало бы свое дело, заставив дочерний элемент занять все доступное пространство и соответствующим образом отрегулировав его высоту. Однако, похоже, это работает не так, как ожидалось. Когда дочерний элемент имеет переполненное содержимое, его высота также переполняется.

Чтобы решить эту проблему, я нашел решение:

высота: расчет (100 % – 40 пикселей);

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

Мне нужен совет о более эффективном способе достижения этой цели. Благодарим вас за любую информацию, которую вы можете предоставить!

Как я могу решить эту проблему? Спасибо за ответы

.container { дисплей: гибкий; гибкое направление: столбец; высота: 300 пикселей; максимальная высота: 300 пикселей; /* Устанавливаем фиксированную высоту контейнера */ } .ребенок { граница: 1 пиксель, сплошная #ccc; отступ: 10 пикселей; } .flex-grow { // высота: Calc(100% - 40px); // это возможный ответ, но что, если у меня несколько детей? гибкий рост: 1; выровнять-самостоятельно: растянуть; } .прокручиваемый { переполнение-y: прокрутка; /* Включаем вертикальную прокрутку */ высота: 100%; /* Занимаем 100% доступной высоты */ Дочерний элемент 1 Дочерний элемент 2 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1 Дочерний элемент 1