Боковая панель, которая занимает остальную часть высоты страницы, и прокручивает, когда внутри много элементов?

Question

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

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

У меня есть два столбца, в левом столбце - div, где написано: Jam in your hood..., а внизу - боковая панель.

и справа карта.

Как я могу иметь боковую панель ... занимать остаточное пространство страницы, но прокручивать, если элементы внутри выше?

Answer 1

Боковая панель считает, что это обычная страница с прокруткой по умолчанию, и будет расширяться вниз. Чтобы предотвратить это, оберните элементы в контейнере с классом .sidebar и добавьте следующие стили:

.sidebar {
  height: 100%;
  overflow: auto;
}

Это сокращает боковую панель до оставшегося пространства и говорит ей прокручивать любое переполнение, которое у нее есть.