html - CSS 滚动对齐对齐。无法缩放滚动元素保持其位置

Question

我正在尝试实现一个“可缩放”画廊。我希望其中一个项目的宽度在用户将其悬停但将其位置固定在窗口上时增加。

我一直在使用 CSS scroll-snap 属性，它似乎在 Chrome 和 Safari 中表现得很好。但是在 Firefox 中，当一个项目被缩放时，它会忽略滚动对齐位置。

有谁知道是否有任何 Firefox 特定属性或 polyfill 可以轻松处理这个问题？还是我必须将 snap 方法更改为基于 JS 的方法？

这是一个示例：（尝试悬停其中一个 div，在 Chrome 中它应该保持居中，在 Firefox 中它移到一边）

#container{
  position: absolute;
  display:flex;
  align-content: baseline;
  width: 90vw;
  height:90vh;
  background-color: #ddd;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
}


.scrollEl{
  flex: 0 0 auto;
  width:100px;
  height:100px;;
  margin:20px;
  background-color:#777;
  scroll-snap-align: center;
  
}


.scrollEl:hover {
  
  width:200px;
  
}

<div id="container">
  <div class="scrollEl">
  1
  </div>
  <div class="scrollEl">
  2
  </div>
  <div class="scrollEl">
  3
  </div>
  <div class="scrollEl">
  4
  </div>
  <div class="scrollEl">
  5
  </div>
  <div class="scrollEl">
  6
  </div>
  <div class="scrollEl">
  7
  </div>
  <div class="scrollEl">
  8
  </div>
  <div class="scrollEl">
  9
  </div>
  <div class="scrollEl">
  10
  </div>
  <div class="scrollEl">
  11
  </div>
  <div class="scrollEl">
  12
  </div>
  <div class="scrollEl">
  13
  </div>
</div>

这是同一件事的JSFiddle

Chrome中的悬停打印：

悬停在 Chrome 1