как установить фиксированную высоту в зависимости от высоты элемента

Question

Допустим, у меня есть два родственных элемента A и B. Я хочу установить фиксированную высоту B (высота контейнера - высота A). Таким образом, дочерние элементы B не будут увеличивать высоту B.

Я пытался использовать Высота: 100%; но он принимает высоту контейнера, а не (высота контейнера - высота А)

Пример углового приложения: https://stackblitz.com/edit/angular-ivopeh

Высота B должна быть зафиксирована на (высота контейнера - высота A) = (50px -30px) = 20px. Таким образом, если дочерний элемент B имеет высоту более 20 пикселей, он должен ограничить его высоту до 20 пикселей и добавить к нему полосу прокрутки

Answer 1

если A имеет фиксированную высоту, то изменение класса B должно выполняться следующим образом:

.B {
  display: block;
  height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
  overflow-y: auto;
}

display: block; требуется для того, чтобы любое значение height, установленное на B, действовало.

overflow-y: auto требуется для отображения полос прокрутки в случае переполнения содержимого B.

Вот рабочая демонстрация: https://stackblitz.com/edit/angular-mw3ugb

Answer 2

Я бы разместил это как комментарий, если бы мог.

Чтобы добавить полосу прокрутки в раздел b, если дочерние элементы больше 20px, вы можете overflow-y:scroll в разделе b (более подробная информация о переполнении приведена ниже). таким образом, вам нужно только позаботиться о высоте, которую можно решить, добавив flexbox или фиксированные значения.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow