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

Question

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>

Answer 1

You might want to replace the height of your .content with height:50vh;

.content {
  height:50vh;
  overflow: auto;
}

and remove the max-height in your .container:

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

The 50vh will serve as the fix height of the blue area (+toggle) so you don't need the max-height in your container. vh

Just adjust the 50vh depending on your need. The blue content looks more than 50% because of the toggle. The height of the blue area is 50% content + height of the toggle. So just reduce the 50vh as needed like 46vh etc.

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%;
  background-color: blue;
}

.content {
  height:50vh;
  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>