Safari Flexbox,可滚动,100vh 问题

Posted

技术标签:

【中文标题】Safari Flexbox,可滚动,100vh 问题【英文标题】:Safari Flexbox, scrollable, 100vh issue 【发布时间】:2016-06-01 05:37:11 【问题描述】:

我正在构建 100% 高度的应用程序侧边栏,它需要滚动并在最底部保留一些链接。我的解决方案在 Chrome 中完美运行,但在 Safari 中存在重叠问题。

基本位如下所示:

position: fixed;
left: 0;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
width: 180px;
justify-content: flex-start;
overflow-y: scroll

在此处查看 Codepen:

http://codepen.io/jackmcdade/pen/PZveXo?editors=1100

任何帮助或见解表示赞赏!我担心可能是这个Webkit Bug

【问题讨论】:

【参考方案1】:

Philip Walton 的 flexbox 解决方法 #1 就是答案。将这些添加到子 flex 元素中有效:

flex-shrink: 0;
flex-basis: auto;

https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

【讨论】:

好答案。但仅供参考,这是我引用的副本的一部分。 ***.com/a/35137869/3597276

以上是关于Safari Flexbox,可滚动,100vh 问题的主要内容,如果未能解决你的问题,请参考以下文章

CSS Flexbox 居中对齐

CSS flexbox布局在Safari中不起作用

ios safari 100vh

为啥这个 flexbox 布局在 Safari 中被破坏了?

移动 safari 和 iOS 11:导航栏重叠的 Web 应用程序和全高 (100vh)

嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]