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

Question

在 http://www.shopifyexperte.de/ 的主页上有两个 flex-box 模块，一个在“Kundenstimmen”下，一个在“Neueste Beiträ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 中的某种错误还是我在这里做错了什么？

原文由 Tom Borowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Joe Hansen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

像这样设置子元素似乎对我有用

flex: 1 0 auto;

原文由 socrateisabot 发布，翻译遵循 CC BY-SA 3.0 许可协议