![最大高度在CSS网格元素中不起作用的问题]( "最大高度在CSS网格元素中不起作用的问题")
本文介绍了最大高度在CSS网格元素中不起作用的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
编辑：正如@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>
我的解释基于以下规格：
这是使用最小内容、最大内容和适合内容的值。
在您的示例中，#grid1(蓝色)工作正常，因为max-height: 100%它获得了50px的高度。height:fit-content没有影响，如果有影响，蓝色将是100px高。
问题是#Out(紫色)太多了。这是因为蓝色容器说我的身高取决于我的孩子(因为适合度)。当您设置height:100%时，您会说它的高度取决于容器#grid0，而不是#out(紫色)。当#grid1(蓝色)和#out(紫色)紫色都表示它们相互依赖时，则会创建循环依赖。
这意味着紫色的百分比高度将被视为自动。因此，它依赖于身高较大的儿童。因为大的有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>