Horizontal scrolling of div not working with scrollLeft

Question

I tried to make horizontal scrolling with scrollLeft. I'm able to align div horizontally but it looks like the scrollLeft function is not working.

Here is my code:

function myFunction() {
  var elmnt = document.getElementById("myDIV");
  elmnt.scrollLeft += 50;
}

#myDIV {
  height: 250px;
  width: auto;
  display:inline-flex;
  gap:10px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 200px;
  background-color: coral;
}

<button onclick="myFunction()">Scroll div</button><br><br>

<div id="myDIV">
  <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
</div>