Flexbox 子项在 Safari 中超出其高度

Posted 2023-03-05

【中文标题】Flexbox 子项在 Safari 中超出其高度

【英文标题】：Flexbox child exceeding its height in Safari

【发布时间】：2018-02-15 02:59:24

【问题描述】：

我在 Safari 中遇到了一个奇怪的 Flexbox 高度问题。

在 Chrome 中，center div 位于body div 内的 100% 高度。

在 Safari 中，center div 超过其容器的 100% 高度；看起来它需要额外 50% 的 hero 元素。

有人见过吗？

body,
html 
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;


#container 
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;


#hero 
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;


#body 
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;


#center 
  background: #BBB;
  flex: 1;
  height: 100%;
  max-width: 800px;
  margin: 0 20px;

<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

【参考方案1】：

似乎#center 上的height: 100%; 是这里的原因。相反，您可以在父级上使用align-items: stretch;，然后将子级调整为使其内容居中：

#body 
  background: #CCC;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;


#body > * 
  display: flex;
  align-items: center;


#center 
  background: #BBB;
  flex: 1;
  max-width: 800px;
  margin: 0 20px;
  align-items: flex-start;

Codepen here.

【讨论】：

就是这样！谢谢 fredrivett。

完全欢迎。如果它符合您的要求，请随意标记为已接受。乐于助人。

SO 告诉我等待 4 分钟，然后我会接受 :)

酷不用担心。很高兴在这里提供帮助，flexbox 对它的浏览器怪癖感到困惑。

【参考方案2】：

弹性项目的初始设置是flex-shrink: 1。这意味着弹性项目可以缩小以适应容器。 Chrome 和 Firefox 正确应用此设置，允许元素缩小以适应。显然，Safari 有不同的解释。

这是一个跨浏览器的解决方案：

#body 
  height: calc(100% - 100px);

现在#center 将拥有其调整后的 100% 的父级。

body,
html 
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;


#container 
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;


#hero 
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;


#body 
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 100px);  /* ADJUSTMENT */
  width: 100%;


#center 
  background: #BBB;
  flex: 1;
  height: 100%;
  max-width: 800px;
  margin: 0 20px;

<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

第二种解决方案是从 #center 子项中完全删除高度规则，而改用 align-self: stretch。

body,
html 
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;


#container 
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;


#hero 
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;


#body 
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 100px); /* ADJUSTMENT */
  width: 100%;


#center 
  background: #BBB;
  flex: 1;
  /* height: 100%; */
  align-self: stretch; /* ADJUSTMENT */
  max-width: 800px;
  margin: 0 20px;

<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

【讨论】：

有趣。如果#body 设置为 100%，为什么它不适合视口的高度（看起来它大约短 50 像素）？

如果可以的话。首先，它碰到了#hero 元素。二、以align-items: center为准。移除这两个障碍物，它将占据整个高度。

【参考方案3】：

您需要根据浏览器添加前缀，例如：

#hero 
  display:-webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;