在
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 ;.
