父元素无固定宽高时，如何实现子元素max-width/max-height:100%？

引言 #

已有大量问答解释max-width和max-height的工作原理。简言之，若父元素无尺寸限制，子元素也会不受限制。但……

问题 #

……有没有其他方法可以将子元素的尺寸限制为「子元素不存在时父元素的固有尺寸」？

...
   <div class="parent"> <!-- 尺寸由其父级flexbox决定 -->
      <div class="child">
         <!-- 可能包含大尺寸内容 --> 
      </div>
   </div>
...

.child {
    max-height: 100%; /* 父元素无限制时无法按预期工作 */
    max-width: 100%; /* 父元素无限制时无法按预期工作 */
    overflow: auto; /* 处理内容溢出 */
}

背景/需求 #

• 页面采用嵌套的水平、垂直flexbox进行自上而下的分层布局
• 整个body禁止出现垂直或水平滚动条
• 通常子元素尺寸由父元素决定（100%、更小或填充剩余空间）
• 在某个嵌套层级中，父元素的尺寸由自上而下的布局确定，但子元素内容可能超出该尺寸：
  • 超出部分需通过子元素内部滚动处理
• 父元素与子元素的衔接处是两种布局策略的转换点：
  • 父元素「上方」为自上而下布局，即父元素尺寸决定子元素尺寸（DOM层级越高，越能决定下层尺寸）
  • 子元素「下方」为自下而上布局，即子元素尺寸影响父元素尺寸（DOM层级越低，越能决定上层尺寸）
  • 两种布局的衔接处需通过滚动处理溢出情况

当前解决方案 #

由于无法通过CSS实现预期效果，我转而使用JS解决：先隐藏子元素（display: none;），获取父元素的宽高（像素值），将子元素的max-width和max-height设为该值，再显示子元素。

具体实现可查看演示中的refreshMaxWidthAndHeight(wrapper)函数。

该方案的缺点： #

• 实现繁琐
• 每次页面变化（折叠/展开、内容修改、视口尺寸变化等）都需触发该逻辑：
  • 很难覆盖所有场景，最稳妥的方式是用setInterval定期检查，但会增加性能开销
• 若子元素内容量大，「隐藏→测量→显示」的方式性能不佳，还会出现明显的闪烁

演示示例 #

演示尽管是简化版场景，但保留了多层布局切片，用于展示：

• 为何无法采用硬编码尺寸限制
• 页面部分区域折叠/展开的动态效果

注意 演示的当前行为正是我期望实现的效果

补充说明： #

这里是错误行为演示，去掉了修改max-width和max-height的JS逻辑，展示了非预期效果：当显示大表格时，整个布局会崩溃。

疑问 #

• 除了max-width/max-height，还有其他实现方法吗？
• 能否避免每次内容变化都用JS调整CSS？
• 有没有其他开发者处理类似布局场景的思路或搜索关键词？（特指背景/需求中提到的两种布局策略衔接点问题）

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