CSS scroll-snap-align. Can´t scale a scroll element keeping its position

Question

I'm trying to implement a "zoomable" gallery. I want the width of one of the items to grow when the user hovers it but keeping its position fixed on the window.

I´ve been using CSS scroll-snap properties and it seems to behave nicely in Chrome and Safari. But in Firefox, when an item is scaled, it ignores the scroll-snap-align position.

Does anyone know if is there any Firefox specific property, or polyfill to handle this easily? Or do I have to change the snap method to a JS based approach?

Here is an example: (Try hovering one of divs, in Chrome it should remain centred, in Firefox it shifts to the side)

#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>

Here is a JSFiddle of the same thing

Prints of hover in Chrome:

hover in Chrome 1

hover in Chrome 2

Prints of hover in Firefox:

hover in Firefox 1

hover in Firefox 2

Thank you very much!

PS: I don't even want to know what is happening in other browsers