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

2022-04-02 00:00:00 css css-grid

编辑：正如@Onkar-ruikar下面解释的那样，我对我的问题有相当大的误解。我仍然不知道如何以一种对我真正有效的方式处理循环依赖的后果，但我必须在这里完全重写我的问题，所以我将这两个问题作为单独的问题处理，将这个标记为已解决并询问后续问题：Dealing with cyclic dependencies of percentage sized boxes css (specifically how to get a max-height)

我遇到了一个问题，即最大高度在网格元素中不能正常工作。基本上我有一个大小灵活的网格元素，在它里面我显示了一个IFRAME。我想要将iframe缩放到其完整的大小，并有一个周围的div适合iframe的大小，与网格元素的最大大小相等，并从那里滚动。我的问题是，这个最大高度不知何故不能正常工作。我为此准备了jsfiddle：

对于此代码，我在#grid1：

中使用"；Height：100%；"；或"；max-Height：100%"；得到不同的结果数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

#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>

将此结果与#grid1的css中的"；Height：100%；"；-行中的注释进行比较。有趣的是，当用Firefox检查#Grid1时，它的高度显示为与max-宽度相等，但显然它不是以这种方式呈现的。

我尝试在#out周围引入另一个容器，将其高度设置为自动，最大高度设置为100%，并将#grid1的高度设置为100%修复，因为我认为它可能是"；fit-content"；，但也不起作用...

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

我对每一个提示都很满意！

解决方案

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

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

#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>

我的解释基于以下规格：

百分比指定相对于包含框的块的框的大小。ref

固有大小根据元素的内容确定大小，而不考虑其上下文。

这是使用最小内容、最大内容和适合内容的值。

在您的示例中，#grid1(蓝色)工作正常，因为max-height: 100%它获得了50px的高度。height:fit-content没有影响，如果有影响，蓝色将是100px高。

问题是#Out(紫色)太多了。这是因为蓝色容器说我的身高取决于我的孩子(因为适合度)。当您设置height:100%时，您会说它的高度取决于容器#grid0，而不是#out(紫色)。当#grid1(蓝色)和#out(紫色)紫色都表示它们相互依赖时，则会创建循环依赖。

有时，百分比大小的框的包含块的大小取决于框本身的固有大小贡献，从而产生循环依赖。在计算此类框的固有大小贡献时(包括对基于内容的自动最小大小的任何计算)，针对与固有大小贡献相同轴上的大小解析的百分比值(循环百分比大小)被特别解析：ref

如果框是未替换的，则指定为包含循环百分比(如10%或calc(10px+0%))的表达式的任何max Size属性或首选Size属性(宽度/最大-宽度/高度/最大-高度)的整数值将仅作为该属性的初始值来计算长方体的固有大小贡献。例如，给定一个宽度为Calc(20px+50%)的框，其最大含量贡献将被计算为其宽度为自动。

这意味着紫色的百分比高度将被视为自动。因此，它依赖于身高较大的儿童。因为大的有100px的高度，紫色也有100px的高度。

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

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

#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，则可以修复该问题。Inherit使其依赖于父项，并使其依赖于子项。

相关文章