如果孩子有最小宽度，Flexbox 列换行在最新的 Safari 中不起作用答案

【问题标题】：Flexbox column wrap not working in latest Safari if children have min-width如果孩子有最小宽度，Flexbox 列换行在最新的 Safari 中不起作用
【发布时间】：2017-07-28 02:14:19
【问题描述】：

在升级 safari（到 10.1.1）和 mac os（到 sierra）后，列换行不再适用于设置了最小宽度的项目列表。我已经尝试在孩子身上设置各种 flex 属性，但是一旦设置好，safari 似乎无法将它们包装在列中。它在我需要支持的其他浏览器中运行，并且在 10.0.1 版本的 safari 中运行。我制作了一个 codepen 来模拟当前在网站上的代码 - http://codepen.io/ssanders/pen/KmJgwK

重要 - 你需要这些 -

*Safari- 版本 10.1.1

*mac os - 塞拉

.list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 600px;
}

.item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 48%;
  margin-top: 25px;
  min-width: 340px;
}

【问题讨论】：

在 Safari 10.1.1 中会发生什么？我知道它没有换行，但你能提供实际渲染的描述或插图吗？
因为它没有换行，所以项目继续单行，超出内容区域并超出页面边界

标签： html css macos safari flexbox

【解决方案1】：

在发布错误并联系 safari 支持团队后，这似乎是 safari 10.1.1 版特有的错误。它已在后续版本中修复。

【讨论】：