CSS Safari 14 的问题是当包含在弹性框内的网格中时，子元素的高度会膨胀

Question

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

Answer 1

在IOS 14 Safari 上测试给定的代码也给出了溢出问题。

我遇到了这个 documentation on display: -webkit-inline-box;，它讨论了一个（即使在那时）过时的 -webkit-inline-box 设置。

如果将此应用到包含两列的 div 并将每一列的宽度设置为 33.33%（因为 repeat(3...) 设置似乎随后被忽略）正确的得到结果。

这看起来相当（好吧，真的）很老套，因为它使用了一个过时的设置，该设置似乎只在 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>

Answer 2

我已经在 Safari 14.1.1 上对此进行了测试，问题似乎已得到解决。

CSS Safari 14 的问题是当包含在弹性框内的网格中时，子元素的高度会膨胀

CSS Safari 14 issues with child elements blowing out in heigh when contained within a grid within a flex box

html

css

safari

grid

flexbox