Inline-flex在Chrome中没有明显原因增加了块宽度，我该如何解决这个问题？

Question

我是playing around 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;
}

Answer 1

我花时间去了 CodePen ，原来你的问题在于css，如果你改了 ＆＃34;显示：inline-flex;＆＃34; 到 ＆＃34; display：flex;＆＃34; 和 ＆＃34; align-items：flex-start;＆＃34; 到 ＆＃34;对齐含量：FLEX-启动;＆＃34; 的。我已经对代码进行了测试，它确实适用于除了safari之外的所有代码，我已经测试了我能想到的各种方式来使它工作，但无济于事。

雅典娜

P.S。另外注意你的JS中缺少一个分号...