使用appearance: base-select时下拉框展开动画失效，添加width后恢复的原因及仅实现高度动画的方案咨询

嘿，我最近在Chrome里折腾appearance: base-select这个新的外观特性，碰到了个百思不得其解的动画问题，想请教下各位大佬。

先说说我的第一个尝试：我想给下拉框的展开做个高度过渡动画，代码是这样的：

select, ::picker(select) {
  appearance: base-select;
}
::picker(select) {
  box-sizing: border-box;
  height: 0;
  min-height: 0;
  interpolate-size: allow-keywords;
  overflow: hidden;
  transition: height 2s linear, display 2s allow-discrete, overlay 2s allow-discrete;
}
select:open::picker(select) {
  height: auto;
  @starting-style {
    height: 0;
  }
}

<select>
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
</select>

结果特别奇怪：关闭动画完全正常，Chrome甚至能追踪展开过程中中途关闭的状态（比如展开到一半就关，关闭动画会从当前高度开始），但展开动画直接一闪就打开了，完全没有过渡效果。

更离谱的是，我试着给样式加了width相关的过渡后，展开动画居然正常工作了！修改后的代码是这样的：

select, ::picker(select) {
  appearance: base-select;
}
::picker(select) {
  box-sizing: border-box;
  width: 0;
  height: 0;
  min-height: 0;
  interpolate-size: allow-keywords;
  overflow: hidden;
  transition: width 2s linear, height 2s linear, display 2s allow-discrete, overlay 2s allow-discrete;
}
select:open::picker(select) {
  width: auto;
  height: auto;
  @starting-style {
    width: 0;
    height: 0;
  }
}

<select>
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
</select>

现在展开和关闭动画都能正常过渡了，可我完全搞不懂width在这里起了什么作用？为什么单独加高度过渡不行，加了宽度就触发了正常的动画？

另外，我的需求其实只是想实现高度的展开/关闭动画，不想动宽度，有没有什么办法能在不加width过渡的前提下，让高度的展开动画正常工作呢？

内容来源于stack exchange