Как проверить наличие пробелов в макете Flexbox

Firefox реализовал gap для макета flexbox, в то время как другие браузеры, такие как Chrome, поддерживают только gap для макета сетки. Это вызывает различия между браузерами, если вы добавляете gap в контейнер flexbox. Функция CSS @supports была создана для ситуаций, когда браузеры еще не поддерживают определенные функции. Так как же проверить поддержку gap во flexbox?

<style>
.flex {
  display: flex;
  gap: 20px;
}
</style>

<section class = "flex">
  <div>Item One</div>
  <div>Item Two</div>
</section>

Обратите внимание: даже если я использую @supports grid-gap вместо gap, Firefox все равно применит пробел к контейнеру flexbox, в то время как Chrome ничего не применит, поэтому это решение не сработает.

Я ищу последовательность, так как это будет огромной проблемой в будущем, если мы начнем применять пробелы к контейнерам flexbox, и это работает в новых реализациях браузерами, но не в более старых реализациях спецификации без возможности тестирования поддержки. .

Я НЕ ищу решение для JavaScript.