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

Question

首页http://www.shopifyexperte.de/有两个 flex-box 模块，一个在“Kundenstimmen”下，一个在“Neueste Beiträge...”下。当内框低于 220px 并且不超过 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 中的某种错误还是我在这里做错了什么？

Answer 1

这似乎是 Safari 中的一个错误。在一个单独的问题中，我测试了在你说类似 -webkit-flex: 1 1 auto; 的行中使用 min-width 代替 auto。

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