在多个嵌套的弹性框内滚动答案

【问题标题】：Scroll inside multiple nested flexboxes在多个嵌套的弹性框内滚动
【发布时间】：2021-05-23 07:58:24
【问题描述】：

这就是我所拥有的：

这就是我想要的：

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

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

有什么办法吗？

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

【问题讨论】：

容器 4 应该如何知道容器 5 的高度？
而overflow 属性需要一个固定的长度（即溢出的东西）。如果没有定义的高度限制，容器 4 的溢出触发器是什么？
@MichaelBenjamin 所以不设置固定高度就不可能吗？
只有在触发溢出时才能生成滚动条。使用动态高度，盒子只是扩展和收缩以容纳内容。沿线某处需要固定长度。
我在上面说的是纯 CSS。当然，如果你对 JS 持开放态度，那么解决方法很简单。

标签： html css flexbox overflow

【解决方案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>

【讨论】：

我无法将固定高度 (height:100px;) 设置为 container-4。它可以或多或少 - 它的内容是动态的。
那么请添加jquery动态设置高度。我编辑了我的答案。希望它能完美运行。

【解决方案2】：

添加此脚本

  <script>
        document.addEventListener("DOMContentLoaded", () => {
            const container_5 = document.querySelector('#container-5');
            const container_4 = document.querySelector('#container-4');
            container_4.style.height = container_5.offsetHeight + 'px';
        });
    </script>

并将#container-4 css 更改为：

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

上面的脚本会将#container-4 的高度设置为#container-5 的计算高度。通过这样做，您不需要任何容器的“预定义”大小。

【讨论】：

【解决方案3】：

到容器2，尝试添加overflow: scroll;。

【讨论】：

这里的一切都不是那么简单:)