为什么这个flexbox布局在Safari中破裂？ [英] Why is this flexbox layout broken in Safari?

问题描述

所以我在CSS中设计这个，它的想法是有一个标题，其余作为可滚动内容。

（底部有一个指向现场演示的链接）

So I designed this in CSS, the idea is to have a header and the rest as scrollable content.
(there's a link to a live demo at the bottom)

唉，在Safari中，并且如下所示：

Alas, in Safari it is broken and looks like this:

如您所见，标题的高度被错误计算，导致绿色框溢出。

As you can see, the height of the header is miscalculated, causing the green box to overflow.

我将问题缩小到一个错误的计算 flex-basis 的标题。或者我相信。

I narrowed down the problem to a wrong calculation of flex-basis of the header. Or so I believe.

在此演示： http：// jsbin。 com / zusavefoqu

Live demo here: http://jsbin.com/zusavefoqu

有什么想法如何解决？

Any idea how to fix it?

感谢！

推荐答案

您可能需要添加供应商前缀。

You may need to add vendor prefixes.

目前，所有主流浏览器都支持flexbox， except IE 8& 9 。

Currently, flexbox is supported by all major browsers, except IE 8 & 9.

某些最近的浏览器版本（例如Safari 8和IE10）需要供应商前缀。

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

要快速添加您需要的所有前缀，您在左侧面板中的CSS： Autoprefixer 。

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

此外，在Safari中您的布局似乎有两个问题：

Also, it seems like there are two problems with your layout in Safari:

• 标题溢出和


• 缺少 #more 上的垂直滚动条。

• the header overflow, and
• the vertical scrollbar on #more is missing.

有关常见Flex错误及其解决方法的列表，请参见此页： Flexbugs 。

For a list of common flex bugs and their workarounds see this page: Flexbugs.

这篇关于为什么这个flexbox布局在Safari中破裂？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！