火狐浏览器的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取出，则在所有浏览器中都会得到相同的行为，但显然会失去对齐：

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