在深度嵌套的flex容器中滚动- min-height不起作用

在深度嵌套的flex容器中滚动，min-height属性可能不起作用的原因是由于flex容器的高度由其内容撑开，而不是受min-height属性限制。解决这个问题可以尝试以下几种方法：

1. 使用overflow属性：将容器的overflow属性设置为"auto"或"scroll"，这样当内容溢出容器时，会显示滚动条，从而可以实现滚动效果。例如：

.container {
  display: flex;
  overflow: auto;
}

1. 添加额外的包裹层：在深度嵌套的flex容器外部添加一个额外的包裹层，并将其高度设置为min-height的值。这样，内部的flex容器就可以在这个包裹层内滚动了。例如：

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <!-- 内部的深度嵌套的flex容器 -->
  </div>
</div>

.outer-wrapper {
  min-height: 300px;
  overflow: auto;
}

.inner-wrapper {
  display: flex;
  /* 其他样式属性 */
}

1. 使用JavaScript动态计算高度：通过JavaScript动态计算深度嵌套的flex容器的高度，并将其设置为min-height的值。这样可以确保容器具有预期的最小高度，并能够在内容溢出时滚动。例如：

const container = document.querySelector('.container');
const content = document.querySelector('.content');

container.style.minHeight = content.offsetHeight + 'px';

需要注意的是，在实际开发中，具体的解决方法可能会因项目需求、布局结构等而有所不同。上述方法仅提供了一些常见的解决思路，具体使用时需要根据实际情况进行调整。

关于腾讯云相关产品和产品介绍链接，建议您访问腾讯云官方网站（https://cloud.tencent.com/）以获取更详细的信息。