对齐项目导致 Safari 上嵌套在弹性框内的网格框出现布局问题

Question

在 Google Chrome 上，以下内容不是问题。但是，当使用 MacOS 版 Safari（不确定移动设备）时，flex 容器内的

.element

的位置不正确，并且完全位于容器元素本身之外。当我删除

align-items: center

时，问题就消失了。但是，我需要

align-items: center

才能使布局正确。请帮忙。

这是我在 Safari 上看到的内容与我在 Chrome 上看到的内容的图像：

.container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.element {
  display: grid;
  grid-template-columns: 1rem 1rem auto 1rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: 100%;
  height: 100%;
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.25rem;
  cursor: pointer;
}

.content {
  display: flex;
  flex-direction: column;
}

<div class="container">
  
  <div class="element">
    <span>X</span>
    <span>Y</span>
    <div class="content">
      <span>Element one content</span>
      <span>Element one more content</span>
    </div>
    <span>Z</span>
  </div>
  
  <div class="element">
    <span>X</span>
    <span>Y</span>
    <div class="content">
      <span>Element two content</span>
      <span>Element two more content</span>
    </div>
    <span>Z</span>
  </div>
  
</div>

Answer 1

确保您使用的是最新版本的 Safari。旧版本确实有一些 Flexbox 错误。