chrome 和 safari flex 高度 100% 失败

Posted 2023-03-05

【中文标题】chrome 和 safari flex 高度 100% 失败

【英文标题】：chrome and safari flex height 100% failure

【发布时间】：2018-01-26 00:21:31

【问题描述】：

Chrome正常，Safari失败。怎么能兼容？ height:100%;

我需要保留 Chrome 并使用 Safari。我的 Safari 版本 10.1.2 (12603.3.8)

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;


* ::-webkit-scrollbar 
  width: 0;


html, body 
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;


body 
  border: 5px solid red;


.d 
  height: 100%;
  border: 5px solid green;

<div class="d"></div>
<div class="d"></div>

【参考方案1】：

似乎是最近涉及flex-direction: column 的 Safari 渲染错误。您将两个 height: 100% 元素放入同一个空间，它们都以 100% 的高度呈现并堆叠，而不是放入同一个空间。

这里有两种解决方案：

将height: 100% 更改为height: 50%，这样两个元素的高度都是其父元素的一半，或者...

删除height 属性并添加flex: 1，这样两个孩子就可以在父母的空间中尽可能大，并自动将自己分成50/50。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;


*::-webkit-scrollbar 
  width: 0;


html,
body 
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;


body 
  border: 5px solid red;


.d 
  height: 50%;
  border: 5px solid green;

<div class="d"></div>
<div class="d"></div>

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;


*::-webkit-scrollbar 
  width: 0;


html,
body 
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;


body 
  border: 5px solid red;


.d 
  flex: 1;
  border: 5px solid green;

<div class="d"></div>
<div class="d"></div>

【讨论】：

@user8478616 我误解了这个问题，直到您指出您使用的是新版本的 Safari，而不是旧版本。

他也可以使用 flex-basis: 100%;或高度：50%；解决。但是他不符合我的要求。伸缩盒默认flex-shrink：1；没有发挥作用。