Fixed-position div’s content doesn’t scroll even if parent’s max-height is set?

I want a toggleable div with fixed position put at the bottom of the screen with a percentage max-height (here, 50%). However, its content isn’t properly displaying a scroll bar on overflow if the screen width is shrunk. It works if I set the overflow properly on .container, but that scrolls the toggle div, which I don’t want. It also works if I set height: 100% to .container, but then its height is 50% no matter what. What do I need to do to get my desired behaviour?

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>