css – flex-wrap在Safari中无法正常工作

在 http://www.shopifyexperte.de/的主页上有两个弹性模块，一个在“Kundenstimmen”下，一个在“NeuesteBeiträge…”下。内部框应该在220像素以下时才包装，而不会超过30％的宽度。这适用于最新的Chrome，FF和Opera(全部在Mac上)，但在Safari 8.0.5(Mac)和任何iOS浏览器中，即使有足够的空间，这些框也不会形成一行。他们总是包装，每一个在自己的一排。

容器的CSS：

.homepage-testimonial-container {
	display: flex;
	display: -webkit-flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 1em;
}

容器内箱子的CSS：

.homepage-testimonial {
	margin-bottom: 1em;
	min-width: 220px;
	max-width: 30%;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

如果我禁用-webkit-flex-wrap(有效地将其设置为Nowrap)，则所有框在一行中排列，但是当浏览器窗口太窄时，最终会溢出该容器。

这是Safari / Webkit中的某种错误，还是我在这里做错了？

解决方法

这似乎是Safari中的一个bug。在一个单独的问题中，我测试使用最小宽度代替自动在行中，你说的话像-webkit-flex：1 1 auto ;.

这个问题有一些信息：http://stackoverflow.com/a/30792851/756329

原文地址：https://www.jb51.cc/css/218439.html