同时使用列计数和 Flexbox 时 Safari 会截断文本

Question

当我使用

column-count

和

display: flex

时，我在 Safari 中得到奇怪的结果 - 内容变得一团糟。

这是我的代码：

.container {
  column-count: 4;
}

.row {
    display: flex;
    border: 1px solid #000;
    padding: 1em;
    width: 100%;
}

<div class="container">
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
  
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
</div>

对于不使用 Safari 的用户，Safari 中的输出如下所示：

这是 Chrome 中的输出：

Safari 似乎尝试添加我指定的最大列数 (

4

)，因此它将两个内容容器分成两半。有没有办法让 Safari 中的这项工作无需使用 JavaScript 来计算

column-count

？

Answer 1

我没有完整的解释，但这几乎就像 Safari 使用 content 而不是 flex 一样。

适用于您的示例代码（在 Safari/IOS17 上测试...）的一个技巧是使用 inline-flex。这似乎愚弄了它，让它意识到这只是一个元素而不是两个。

我当然不知道这是否适用于一般情况。你一定要尝试一下。

.container {
  column-count: 4;
}

.row {
    display: inline-flex;
    border: 1px solid #000;
    padding: 1em;
    width: 100%;
}

<div class="container">
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
  
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
</div>