显示 flex 与 Safari 问题

Posted 2023-03-05

【中文标题】显示 flex 与 Safari 问题

【英文标题】：Display flex with Safari issue

【发布时间】：2018-02-22 05:37:50

【问题描述】：

这里的小问题。

我对 Safari 和 flex 有疑问。

这是我想用 chrome 实现的目标以及用 Safari 实现的结果 Result with chrome, firefox, ... 和 with Safari。

还有代码：

<style>
  #div1background:black;width:250px;height:600px;display:flex;flex-direction:column;padding-bottom:5px
  #div2background:pink;color:#FFF;width:240px;height:200px
  #div3background:blue;color:#FFF;width:240px;height:100%;position:relative
</style>

<div id="div1">
  <div id="div2">test</div>
  <div id="div3">test2</div>
</div>

你有什么想法吗？

【问题讨论】：

还有小提琴jsfiddle.net/g210444r/5

Flex items overflowing container in Safari的可能重复

【参考方案1】：

我找到了解决方案。这是我所做的：

#div3
  background:blue;
  color:#FFF;
  width:240px;
  height:100%;
  flex:1 1 100%;
  height:auto;