Inline block containing inline block (Safari bug)

HTML

<span class='parent'></span>

CSS

body {
  overflow-x: scroll;
  white-space: nowrap;
}
.parent {
  display: inline-block;
  border: 1px solid blue;
  margin: 20px;
}
.child {
  display: inline-block;
  margin: 0 0.1em;
}

JavaScript

const parent = document.querySelector(".parent");
for (let i=0;i<1000;i++) {
  const child = document.createElement("span");
  child.classList.add("child");
  child.innerText = '' + i%10;
  parent.appendChild(child);
}
// scroll to end
setTimeout(() => {
document.body.parentNode.scrollLeft = parent.offsetWidth;
}, 100)