我可以使用 CSS 有效地实现 max-width=100% 和 max-height=100% 而无需父级具有明确/固定的宽度和高度，替代方法吗？

Question

简介

已经有很多问题和答案解释了

max-width

和

max-height

的工作原理（例如 this）。基本上，如果父母不受限制，孩子也不受限制。好吧，好吧，但是……

问题

...但是有没有其他方法可以让我限制孩子的大小为父母在孩子根本不存在的情况下的大小？

...
   <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％或更少或填充剩余）
• 在某些嵌套级别，我的父 div 具有由自上而下嵌套确定的正确大小，并且我知道内部内容可能会更大。
  • 较大的尺寸应通过内部滚动来解决，以防溢出
• 我的父母和孩子相遇的点是不同布局策略相遇的过渡点
  • “上面”的所有内容父级是从上到下布局，这意味着父级大小影响子级大小（DOM 中较高级别决定较低级别的大小）
  “下面”的所有内容
  • 子级是从下到上的布局，这意味着子级大小影响父级大小（DOM中的较低级别决定了较高级别的大小） 如果需要，可以通过滚动解决这两个不同世界之间的交汇点
我目前的解决方法

由于我无法使用 CSS 获得所需的行为，因此在子级隐藏 (

max-width

) 期间，我通过将子级的

max-height

和

width

更改为父级的

height

和

display: none;

（以像素为单位），将故障转移到 JS。我首先隐藏子项以查看父项的大小，然后限制子项的大小，然后再显示子项。请参阅

JSFiddle 演示

中的 JS 函数

refreshMaxWidthAndHeight(wrapper)

我实际上在做什么。 这种方法的缺点：

很乱

• 每次发生变化时（任何折叠/展开、内容变化、视口大小变化等），都必须触发它
• 很难详尽地涵盖所有情况，最安全的可能是定期使用
  setInterval
  • 并不断进行检查
  如果子内容很大/很重，
隐藏->测量->显示
• 方法的性能不是很好，并且会导致可见的闪烁
JSFiddle 演示示例

JSFiddle 演示

虽然这个演示是我的情况的简化版本，但我故意留下了一些额外的设计切片层来演示：

为什么不可能有

硬编码
• 大小限制 折叠/展开页面某些部分的动态

注意

演示的当前行为正是我想要实现的行为 编辑：

这里是

损坏的行为 JSFiddle

，它演示了不良行为，它与上面的 JSFiddle 基本相同，但具有改变 max-width 和

max-height

的 JS 解决方法被注释掉。注意显示大表格时整个布局如何被破坏。

问题

除了使用

max-width
• /

  max-height

  还有其他方法吗？是否可以避免在每次相关内容更改时使用 JS 来调整 CSS？
• 有关其他开发人员如何处理类似布局情况的任何指示或搜索词？
• 我正在考虑
  上下文/需求
  • 部分的最后一点，我在其中描述了从上到下与从下到上的交汇点

Answer 1

outer layout <-> layout boundary <-> inner layout

是否会 

https://jsfiddle.net/j3zukw70/1/

重现您的问题还是这太简单了？