Javascript 我可以使用CSS有效地实现最大宽度=100%和最大高度=100%，而无需父母有明确的固定的宽度和高度，替代方法吗

Intro

已经有很多问题和答案解释了max-width和max-height的工作原理(例如this个).基本上，如果父母不受限制，子元素也不受限制.好吧，很好，但是.

问题

...但还有没有其他方法可以让我把子元素的restrict个尺寸变成如果子元素根本不在场的父母的尺寸呢？

...
   <div class="parent"> <!-- size determined by it's parent flexbox -->
      <div class="child">
         <!-- could have large content --> 
      </div>
   </div>
...

.child {
    max-height: 100%; /* not working as needed if parent is unrestricted */
    max-width: 100%; /* not working as needed parent is unrestricted */
    overflow: auto; /* handle oversized content */
}

背景/要求

• 页面设计/布局是自上而下的切片，具有水平和垂直弹性框的嵌套层
• 全身不应该有纵向或横向卷轴
• 一般来说，某些子元素的大小是由其父母的大小决定的(100%或更小或填满剩余)
• 在某种嵌套级别上，我有一个父分区，该分区具有由自上而下的嵌套确定的正确大小，并且我知道内部内容的大小可能会更大.
  • 应通过内部滚动来解决较大的尺寸，以防溢出
• 我的父母和子元素相遇的点是不同布局策略相遇的过渡点
  • 一切"above"父级都是自上而下的布局，这意味着父级大小会影响子级大小(多姆中较高级别决定较低级别的大小)
  • "below" child的一切都是自下而上的布局，这意味着子元素的大小会影响父母的大小(多姆中的较低级别决定较高级别的大小)
  • 如果需要，通过滚动来解决这两个不同世界之间的交汇点

我当前的解决方案

由于我无法使用CSS获得所需的行为，因此我可以在隐藏子元素(display: none;)期间将子元素的max-width和max-height更改为父母的width和height(以像素为单位)来故障转移到JS.我首先隐藏子元素以查看父母的大小，然后限制子元素的大小，然后再显示子元素.

请参阅我实际正在做的事情中的JS函数refreshMaxWidthAndHeight(wrapper).

Cons of this approach:

• 那里很乱
• 每次事情发生变化(任何折叠/展开、内容变化、视区大小变化等)时都必须触发它
  • 很难详尽地涵盖所有情况，最安全的可能是使用定期setInterval并不断进行判断
• 如果子内容很大/很重，hide->measure->show方法的性能不是很好，会导致可见flicker

JSFiddle演示示例

JSFiddle demo尽管这个演示是我的情况的简化版本，但我故意留下了一些额外的设计切片层来演示:

• 为什么不可能有hardcoded个尺寸限制
• 折叠/展开页面某些部分的动态

演示的NOTE个当前行为正是我试图实现的行为

编辑:

这里是Broken behaviour JSFiddle，它展示了不希望的行为，它基本上与上面的JSFiddle相同，但JS变通方法改变了max-width和max-height被排除在外.

请注意，当显示大表格时，整个布局如何中断.

问题s

• 除了使用max-width/max-height之外，还有其他方法吗？
• 是否有可能避免在每个相关内容更改时使用JS调整CSS？
• 有关于其他开发人员如何处理类似布局情况的指针或搜索词吗？
  • 我正在思考背景/要求部分中的最后一点，其中我描述了自上而下与自下而上的交汇点