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

Question

我是playing around使用 display: inline-flex css 属性，在 Firefox 和 Chrome 中看到相同布局的完全不同的行为:

以下是 Firefox 中 block 的堆叠方式:

它在 Chrome 中的样子如下:

所以，Firefox 正在按预期工作(至少对我来说是这样)，而 Chrome 出于某种神秘的原因增加了容器的宽度。

我的问题是 - 哪些行为符合规范以及如何让 Chrome 像 Firefox 一样渲染 block 。

为了 self 完整性，这里是我提供链接的 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上，如果你改变“display:inline- flex;” 到 “display:flex;” AND “align-items:flex-start;” 到 “align-content:flex-start;”。我已经测试了代码，它肯定适用于除 Safari 之外的所有浏览器，我已经测试了我能想到的一切让它工作的方法，但无济于事。

雅典娜

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