Safari中flex容器嵌套grid元素时align-items导致布局异常

在Chrome中布局完全正常，但MacOS版Safari里，flex容器.container内的.element元素会完全超出容器范围。移除.element的align-items: center后问题消失，但我们需要保留这个垂直居中属性，以下是具体解决方案：

原始代码 #

CSS

.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;
}

HTML

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

解决方案 #

这个问题是Safari对flex子元素设置height:100%结合grid的align-items:center时的布局计算bug，提供三种可行方案：

• 方案一：修改容器的align-items属性
  给.container添加align-items: flex-start，覆盖默认的stretch行为，让子元素高度由内容决定，同时保留内部垂直居中：

.container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start; /* 添加此行 */
}

.element {
  display: grid;
  grid-template-columns: 1rem 1rem auto 1rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: 100%; /* 保留宽度占满容器 */
  /* 移除height:100%，或按需改为min-height */
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.25rem;
  cursor: pointer;
}

• 方案二：给子元素单独设置align-self
  如果不想修改容器样式，直接给.element添加align-self: flex-start，单独覆盖容器的拉伸行为：

.element {
  display: grid;
  grid-template-columns: 1rem 1rem auto 1rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: 100%;
  align-self: flex-start; /* 添加此行 */
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.25rem;
  cursor: pointer;
}

• 方案三：替换height属性为min-height
  如果需要元素高度和容器关联，把.element的height:100%改成min-height:100%，同时配合容器的align-items:flex-start，也能避免异常：

.element {
  display: grid;
  grid-template-columns: 1rem 1rem auto 1rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: 100%;
  min-height: 100%; /* 替换height为min-height */
  align-self: flex-start; /* 配合此属性生效 */
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.25rem;
  cursor: pointer;
}

以上方案都能在Safari中保留.element内部的垂直居中效果，同时让元素正常显示在容器内，和Chrome表现一致。

内容的提问来源于stack exchange，提问作者Oscar