Scrollbar does not have the same behavior in Chrome and Firefox

Question

I was trying to avoid vertical scrollbar shift in container (related to this question) and I succeeded to make it with the margin and the overflow set to scroll. However, on Firefox (see screenshot) the scrollbar is still displayed whereas in chrome/safari/opera (see screenshot) the scrollbar is hidden when it is not needed. I would like Firefox to behave like the others. Is it possible?

I found the property scrollbar-gutter but it is not compatible with safari.

Firefox

Chrome

let flag = true;

const setHeight = () => {
  if (flag) {
    document.getElementById('container').style.setProperty('height', '100%');
  } else {
    document.getElementById('container').style.removeProperty('height');
  }
  flag = !flag;
};

document.getElementById('button').addEventListener('click', setHeight);
setHeight();

.panel-container {
  height: 300px;
  width: 510px;
  padding: 8px 12px 0 20px;
  background-color: blue;
  overflow: scroll;
}

.card {
  height: 86px;
  width: 100%;
  background-color: grey;
  border-radius: 3px;
  border: 1px solid red;
  margin-bottom: 10px;
  cursor: pointer;
}

.scrollbar::-webkit-scrollbar-track {
  width: 14px;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid green;
}

.scrollbar::-webkit-scrollbar-corner {
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
  <div class="card">
    <div class="card-left-container"></div>
    <div class="card-middle-container"></div>
    <div class="card-right-container"></div>
  </div>
</div>