Css Inline flex在Chrome中无明显原因地增加了块宽度，我如何解决这个问题？

我使用了

display:inline flex

css属性，在Firefox和Chrome中看到了相同布局的完全不同的行为：

以下是Firefox中块的堆叠方式：

下面是它在Chrome中的外观：

因此，Firefox正在按预期工作（至少我是这样认为的），Chrome出于一些不确定的原因增加了容器的宽度

我的问题是——什么行为符合规范，我如何让Chrome像Firefox一样渲染块

为了自我完善，以下是我提供链接的codepen代码片段中的css代码：

body {
  font-family: Century Gothic;
}

.adder {
  display: inline-block;
  vertical-align: top;
}

.stage {
  height: 200px;
  background: linen;
  overflow: visible;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.job {
  height: 50px;
  width: 100px;
  background: white;
  color: black;
  border: 1px solid black;
}
.job:nth-child(2n) {
  background: black;
  color: white;
  border-color: white;
}

---

我花了点时间，转到了CodePen，发现您的问题在于css，如果您将“display:inline flex；”“更改为“display:flex；”“”和“align items:flex start；”“更改为“align content:flex start；”。我已经对代码进行了测试，除了safari之外，它肯定可以在所有的平台上运行。我已经测试了所有我能想到的方法，以使其正常工作，但没有任何效果

雅典娜

---

另请注意，您的JS中缺少一个分号

这似乎是一个错误：@Riskbreaker感谢您提供此链接，它看起来很相关，现在让我们看看是否有人可以帮助解决问题的第二部分-如何克服此问题。inline-flex对于CSS3来说是非常新的，它将是错误和不可预测的。我尽量避免使用任何真正新的东西，直到它变得更加主流。@TomRudge虽然在某种程度上是这样，但它至少在一年左右是稳定的。在某些情况下，flexbox是一个合适的工具-例如，在chrome扩展中。但是，是的，随时随地使用它将是一个错误的决定。