CSS百分比尺寸盒循环依赖问题：如何正确实现max-height限制

你遇到的是百分比max-height无明确父高度参考时失效的问题，可通过给父容器启用Flex布局绕开循环计算限制，仅需修改两处CSS规则即可实现需求：

• 给.frame添加Flex纵向布局声明
• 给.overflowctl配置Flex收缩规则并重置最小高度

修改后的完整CSS代码如下，HTML结构无需调整：

.overflowctl {
  overflow-y: auto;
  overflow-x: hidden;
  /* 新增规则 */
  flex: 0 1 auto;
  min-height: 0;
}

#contentsmall {
  height: 50px;
}

#contentbig {
  height: 350px;
}

.content {
  background-image: linear-gradient(30deg, #005500 0%, #9922ee 100%);
  width: 120px;
}

.frame {
  height: auto;
  max-height: calc( 100% - 40px );
  width: 120px;
  border-radius: 15px;
  padding: 20px;
  background: #221100;
  /* 新增规则 */
  display: flex;
  flex-direction: column;
}

.canvas {
  display: inline-block;
  height: 250px;
  width: 200px;
  margin-right: 50px;
  background: #ddccaa;
  vertical-align: top;
}

实现逻辑说明 #

Flex布局的尺寸计算逻辑会主动计算父容器的可用空间，不需要依赖明确的父高度值，flex: 0 1 auto表示子项默认高度为内容高度，允许在空间不足时收缩，min-height:0覆盖Flex子项默认的「最小高度等于内容高度」规则，允许子项收缩到小于内容高度的数值，此时overflow就会正常触发。
修改后内容高度小于父容器可用空间时，容器高度自动贴合内容；内容超出时会自动触发滚动，同时完全保留.frame的padding、border-radius效果，滚动条仅出现在内容区域，不会破坏外层样式。

内容的提问来源于stack exchange，提问作者apaierubkf