Содержимое div с фиксированной позицией не прокручивается, даже если установлена ​​максимальная высота родителя? ⇐ CSS

[Anonymous]

Мне нужен переключаемый элемент div с фиксированной позицией, расположенный внизу экрана с максимальной высотой в процентах (здесь 50%). Однако его содержимое неправильно отображает полосу прокрутки при переполнении, если ширина экрана уменьшена. Это работает, если я правильно настрою переполнение в .container, но при этом будет прокручиваться переключатель div, чего мне не нужно. Это также работает, если я устанавливаю для высоты: 100% значение .container, но тогда его высота будет равна 50%, несмотря ни на что. Что мне нужно сделать, чтобы добиться желаемого поведения?


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

const content = document.querySelector(".content");
const toggle = document.querySelector(".toggle");
toggle.addEventListener("click", (e) => {
if (content.style.display != "none") {
content.style.display = "none";
toggle.innerHTML = "▲";
} else {
content.style.display = "block";
toggle.innerHTML = "▼";
}
});

Код: Выделить всё

.container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 50%;
background-color: blue;
}

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

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.

▼

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ght-is-set