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

Question

Если для элемента установлено значение display: inline-flex и для него установлено значение overflow, Firefox добавляет пробел размером около 6 пикселей (аналогично пробелу в 3 пикселя обычных встроенных элементов).

Firefox

Chrome / Safari / Edge

Хотите знать, если это ошибка в Firefox или во всех других браузерах?

Codepen: https://codepen.io/cloakedninjas/pen/XQMjvq

.wrapper {
  border: 1px red solid;
}

ul {
  margin: 0;
  display: inline-flex;
  list-style-type: none;
  overflow-x: auto; /* comment out to remove whitespace */
}

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

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

Answer 1

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

Базовая линия в строке-block '- это базовая линия его последнего строкового блока в обычном потоке, если только у него нет либо линейных блоков в потоке, либо если его свойство' overflow 'имеет вычисленное значение, отличное от' visible ', в этом случае базовая линия являетсякрай нижнего поля.

Взгляните на демонстрацию ниже в 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>

Хром :

Firefox :

Еще один интересный поток:

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

---

Ссылки

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

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