html - 根据多个嵌套 flexboxes 中另一个容器的动态高度在一个容器中创建滚动

Question

这是我的:

这就是我想要的:

因此，“Container 5”的全部内容无需滚动即可显示。 “Container 2”的高度应仅取决于“Container 5”的高度。如果“Container 4”的内容比“Container 5”多，则“Container 4”应该是可滚动的。 “Container 5”的内容是动态的——我不知道它的高度。“Container 3”应该填满底部的整个可用屏幕空间。

这是代码: https://jsfiddle.net/antonfil/5kd1gnou/13/

有什么想法吗？

JavaScript 解决方案很好，但如果可以用纯 CSS 实现它也很有趣。

Answer 1

更改container-2、container-4 和container-5 的样式如下。

#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;
}

这里我们将container-5的高度设置为最小高度。并为 container-4 设置垂直溢出作为 scroll。然后使用 Jquery 动态调整 container-4 的高度。

将此脚本添加到您的 HTML 文件中。

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

并且不要忘记将 Jquery 添加到您的 HTML。

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