最大高度在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使其依赖于父项,并使其依赖于子项。

相关文章