css - Firefox align-items 结合 rotate()

Question

我正在尝试为紧凑表创建一个旋转的标题，它在 Chrome 中运行良好，但在 Firefox 中运行良好。

代码：

div {
  display: flex;
  align-items: stretch;
}

span {
  border-left: 1px solid black;
  writing-mode: vertical-lr;
  transform: rotate(200deg);
  display: inline-flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
  width: 35px !important;
}

<div>
  <span><b>Hello</b> world</span>
  <span><b>Foo</b> bar</span>
</div>

在 Chrome（和 Edge）中，我得到：

在 Firefox 中，我得到：

如果我取出align-items: center，我在所有浏览器中都会得到相同的行为，但我显然失去了对齐：

我想我可以用填充来破解它，但我宁愿知道它在做什么以供将来参考。

标签： cssfirefoxflexboxcross-browser