Firefox inline-flex с переполнением получает пробелы

Сброс vertical-align свойства исправления this. Я предполагаю, что проблема (разница в поведении с Firefox и другими браузерами) — это строка в спецификации¹:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Взгляните на приведенную ниже демонстрацию в Firefox и Chrome — Firefox обрабатывает inline-flex так же, как и inline-block, используя нижнее поле в качестве базовой линии.²:

.wrapper {
  border: 1px red solid;
}

ul {
  margin: 0;
  display: inline-flex;
  list-style-type: none;
  overflow: auto;
  height: 50px;
}

li {
  flex: 0 1 100px;
  margin-right: 10px;
  background: #eee;
}

<div class = "wrapper">
  inline
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Хром:

Fire Fox:

Еще одна интересная темка:

Почему базовая линия элемента `inline-block` с `overflow:hidden` устанавливается на его нижнее поле?

использованная литература

¹Вертикальное выравнивание: Спецификация вертикального выравнивания

²Черновики редактора рабочей группы CSS: Спецификация не говорит, вызывает ли «переполнение: [невидимый]» в контейнере flex/grid другую базовую линию (как это происходит для встроенного блока)