我想要一个固定位置的可切换迪夫，放在屏幕底部，并具有最大高度百分比(此处，50%).然而，如果屏幕宽度缩小，其内容将无法在溢出上正确显示滚动条.如果我将溢出正确设置为.container，它就可以工作，但这会滚动切换迪夫，这是我不想要的.如果我将height: 100%设置为.container，它也有效，但无论如何，它的高度都是50%.我需要做什么才能达到我想要的行为？
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;
}<div class="other">
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.
</div>
<div class="container">
<div class="toggle">▼</div>
<div class="content">
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.
</div>
</div>