CSS Safari 14 出现问题，当包含在弹性框内的网格中时，子元素的高度会爆炸
Posted
技术标签:
【中文标题】CSS Safari 14 出现问题，当包含在弹性框内的网格中时，子元素的高度会爆炸【英文标题】：CSS Safari 14 issues with child elements blowing out in heigh when contained within a grid within a flex box 【发布时间】：2021-02-24 12:03:09 【问题描述】：在下面的Col1 和Col2 下方的标记中，grid 将在 MacOS Safari 14 上爆出高度。有趣的是，它会爆出（屏幕外）与上方 div 的确切高度相同网格。这是 Safari 的错误吗？是否有任何解决方法？或者我在 CSS 中遗漏了什么？
MacOS Safari 14 的屏幕截图
来自 Chrome 的屏幕截图
<!DOCTYPE html>
<html lang="en" class="h-full">
<style>
html,
body
height: 100%;
margin: 0;
.h-full
height: 100%;
.h-10
height: 2.5rem;
.min-h-0
min-height: 0;
.flex
display: flex;
.flex-col
flex-direction: column;
.flex-auto
flex: 1 1 auto;
.grid
display:grid;
.grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
.col-span-1
grid-column: span 1 / span 1;
.flex-initial
flex: 0 1 auto;
.bg-green
background-color: rgb(12, 236, 12);
.bg-pink
background-color: rgb(248, 47, 255);
.bg-blue
background-color: rgb(110, 230, 252);
.bg-yellow
background-color: yellow;
</style>
</head>
<body class="h-full">
<div id="sapper" class="h-full">
<div class="flex flex-col h-full">
<header class="flex-initial">
Navigation
</header>
<main class="flex-auto h-full flex flex-col">
<div class="flex-initial h-10 bg-yellow">
Middle
</div>
<div class=" bg-pink grid grid-cols-3 flex-auto min-h-0">
<div class="col-span-1 bg-green">Col 1</div>
<div class="col-span-1 bg-blue">Col 2</div>
</div>
</main>
</div>
</div>
</body>
</html>【问题讨论】：
您好，您的代码中有几个拼写错误（flex-initial/flex-initial），但遗憾的是更正这些并没有解决您的问题，我只是想知道以防万一它们会影响其他东西。我找到了一个在 Safari 中似乎可以解决的溢出问题，请参阅答案，但请谨慎对待，因为我并不完全理解它的工作原理。 谢谢你，我更正了拼写，没有比凌晨 1 点发问题更棒的了！ 感谢您弄清楚用于计算溢出量的内容 - 让我挠了几个小时。你有没有到任何地方？我遇到了完全相同的问题：flex-column 父级，其子级既是 flex-grow: 1 也是网格。实际的井喷肯定是在网格子节点上，这似乎在 DOM 树下很远才会受到影响，但是你去... @KyleDuncan 目前我已经接受它作为 Safari 实现中的错误。我不知道如何向 Apple 提出这个问题。 我试图通过 Apple 支持提出这个错误，结果发现这是错误的地方，应该在feedbackassistant.apple.com 提出。我已经打开了一个案例，但据我所见，没有指向该案例的公共链接。我会用结果来回答这个问题。 【参考方案1】：在 ios 14 Safari 上测试给定代码也会出现溢出问题。
我遇到了这个documentation on display: -webkit-inline-box;，它讨论了一个（即使是当时）过时的 -webkit-inline-box 设置。
如果您将此应用于包含两列的 div 并将这些列中的每一个设置为 33.33% 宽度（因为 repeat(3...) 设置似乎被忽略了），则会获得正确的结果。
这似乎相当（嗯，真的）hacky，因为它使用了一个过时的设置，似乎只在 Safari 中工作 - 但能持续多久 - 并且似乎不会让其他浏览器感到不安。
在 Window 10 - Chrome、Edge、Firefox - 和 iPadIOS 14 - Safari 上测试。
以防万一，这里有这两个添加的给定代码（特意作为内联样式放入以明确添加了什么）。
<!DOCTYPE html>
<html lang="en" class="h-full">
<style>
html,
body
height: 100%;
margin: 0;
.h-full
height: 100%;
.h-10
height: 2.5rem;
.min-h-0
min-height: 0;
.flex
display: flex;
.flex-col
flex-direction: column;
.flex-auto
flex: 1 1 auto;
.grid
display:grid;
.grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
.flex-inital
flex: 0 1 auto;
.bg-green
background-color: rgb(12, 236, 12);
.bg-pink
background-color: rgb(248, 47, 255);
.bg-blue
background-color: rgb(110, 230, 252);
.bg-yellow
background-color: yellow;
</style>
</head>
<body class="h-full">
<div id="sapper" class="h-full">
<div class="flex flex-col h-full">
<header class="flex-initial">
Navigation
</header>
<main class="flex-auto h-full flex flex-col">
<div class="flex-inital h-10 bg-yellow">
Middle
</div>
<div class=" bg-pink grid grid-cols-3 flex-auto min-h-0" style="display:-webkit-inline-box;">
<div class=" bg-green" style="width:33.33%;">Col 1</div>
<div class=" bg-blue" style="width:33.33%;">Col 2</div>
</div>
</main>
</div>
</div>
</body>
</html>【讨论】：
感谢您的建议，我已经尝试过修复，但它与带有网格类的 div 的子 div 上的grid-column: span 1 / span 1; 不兼容。 display:-webkit-inline-box; 覆盖 display:grid【参考方案2】：
我已在 Safari 14.1.1 上对此进行了测试，问题似乎已得到解决。
【讨论】：
以上是关于CSS Safari 14 出现问题，当包含在弹性框内的网格中时，子元素的高度会爆炸的主要内容，如果未能解决你的问题，请参考以下文章
css 在iOS上，当您触摸并按住触摸目标（例如链接）时，Safari会显示包含该链接信息的标注。这个属性