时间戳

首页 > 解决方案 > CSS Safari 14 出现问题，当包含在弹性框内的网格中时，子元素会爆炸

html - CSS Safari 14 出现问题，当包含在弹性框内的网格中时，子元素会爆炸

问题描述

在下面Col1和Col2内部的以下标记中grid，MacOS Safari 14 上的高度将爆炸。有趣的是，它在网格上方 div 的确切高度处爆炸（屏幕外）。这是一个 Safari 错误，是否有任何解决方法或者我错过了我的 CSS 中的某些内容？

MacOS Safari 14 的屏幕截图 MacOS Safari 14 的屏幕截图

来自 Chrome 的屏幕截图 来自 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>

标签： htmlcssflexboxsafarigrid

解决方案

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

我在展示中看到了这个文档：-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>

推荐阅读