Create scroll in one container based on the dynamic height of another container inside multiple nested flexboxes

Question

This is what I have:

This is what I want:

So the whole content of 'Container 5' should be visible without scroll. The height of 'Container 2' should be only dependent on the height of 'Container 5'. 'Container 4' should be scrollable if it has more content than 'Container 5'. The content of 'Container 5' is dynamic - I don't know it's height. 'Container 3' should fulfill the whole available screen space at the bottom.

This is code: https://jsfiddle.net/antonfil/5kd1gnou/13/

Any ideas how to do it?

JavaScript solutions are fine but it's also interesting if it is possible to achieve it with pure CSS.

Answer 1

change style of container-2,container-4 and container-5 as below.

#container-4 {
  display: flex;
  overflow-y:auto;
  flex: 1 0;
  background-color: yellow;
}
#container-5 {
  display: flex;
  flex: 1 0;
  height:min-content;
  background-color: orange;
}

here we set the height of container-5 as the minimum height. And set a vertical overflow as scroll for container-4. Then adjust the height of container-4 dynamically using Jquery.

add this script to your HTML file.

<script>
$(document).ready(function(){
    let height=$("#container-5").height();
   $("#container-4").height(height);
});
</script>

And don't forget to add Jquery to your HTML.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>