最大高度在 css 网格元素中不起作用的问题

Question

编辑：正如@onkar-ruikar 在下面解释的那样，我误解了我的问题。我仍然不知道如何以一种真正适合我的方式处理循环依赖的后果，但我不得不在这里完全重写我的问题，所以我将这两个问题视为单独的问题，标记为这个已解决并要求跟进：

我遇到最大高度在网格元素中无法正常工作的问题。基本上我有一个具有灵活大小的网格元素，并且在其中我显示了一个 iframe。我想将 iframe 缩放到它的完整大小，并有一个适合 iframe 大小的周围 div，最大大小等于网格元素，然后从那里滚动。我的问题是，最大高度无法正常工作。我为此准备了一个jsfiddle：

对于此代码，使用“height: 100%;”得到了不同的结果或 #grid1 中的“最大高度：100%”：

#grid0 {
  display: grid;
  grid-template-rows: 50px;
  grid-template-columns: 200px;
  height: 500px;
}

#grid1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='grid0'>
  <div id='grid1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

比较此结果与在 css 的“高度：100%；”行中评论 #grid1 的结果。有趣的是，当用 firefox 检查 #grid1 时，它的高度显示为它应该与最大宽度一致，但显然它不是以这种方式呈现的。

我试图在#out 周围引入另一个容器，将其高度设置为 auto 并将 max-height 设置为 100% 并将 #grid1 的高度设置为 100% fix，因为我认为它可能是“fit-content”，但是它也没有用...

有没有人建议如何解决这个问题，或者我做错了什么？

我会很高兴得到每一个提示！

Answer 1

我认为这个问题实际上与网格无关。我也可以使用普通块元素重现它。

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

我的解释基于以下规格：

Percentages specify sizing of a box with respect to the box’s containing block.ref

Intrinsic sizing determines sizes based on the contents of an element, without regard for its context.

即使用 min-content、max-content 和 fit-content 值。

在您的情况下，#grid1(blue) 正在按预期工作，因为 max-height: 100%，它的高度为 50px。 height:fit-content 没有效果，如果有效果，那么蓝色将是 100px 高。

问题是 #out(purple) 溢出了。这是因为蓝色容器说我的身高取决于我的children（因为fit-content）。当您设置 height:100% 时，您说它的高度取决于容器 #grid0 而不是 #out(purple)。当#grid1(blue) 和#out(purple) purple 都说它们相互依赖时，就会产生循环依赖。

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially: ref

If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto.

这意味着百分比高度在紫色上被视为自动。所以它依赖于它的 children #large 高度。大号有 100px 高度，紫色也有 100px 高度。

你说你在#out 周围又添加了一个容器：

#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height*/
  height: 100%;
}

#div2 {
  height: auto;
  /* uncomment following to get desired result */
  /* height: inherit;*/
  max-height: 100%;
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}

<div id='div0'>
  <div id='div1'>
    <div id="div2">
      <div id='out'>
        <div id='large'>
        </div>
      </div>
    </div>
  </div>
</div>

在此代码中，如果您使用 inherit 而不是 auto，它可以解决问题。继承使其依赖于 parent 并自动依赖于 children.

最大高度在 css 网格元素中不起作用的问题

Problem with max-height not working in css grid element

css

css-grid