`mjx-container` box width should be wider than actual content width

Issue Summary

I am trying to add scroll bar for overflowed equations, and tried the workaround from stackoverflow, then I updated my plugin on this commit and tested it with different browsers, for Safari, I will always get an unexpected scroll bar for the equation \LaTex:

After investigated a little while, I found that Chrome and Safari will render content to a little wider mjx-math box, compare to Firefox and Edge. If I remove the width style for mjx-math, scroll bar will be disappeared, and will get the inner content width as following:

Steps to Reproduce:

Open Safari or Chrome (set screen size to 320x285)
Create a simple HTML:

<!DOCTYPE html>
<html lang="en">
<body>
  <script src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>
</html>

Type following in console, then execute:

var outer = document.createElement('p');
document.body.append(outer);
var ele = document.createElement('div');
ele.style = 'max-width: 100%;display: inline-grid;overflow-x: auto;overflow-y:hidden;'
ele.innerHTML="\\(\\LaTeX\\)";
outer.append('typesetting ');
outer.append(ele);
MathJax.typesetPromise([ele])

Then:

Technical details:

MathJax Version: 3.2.2
Client OS: Windows 10
Browser: 105.0.5195.127

I am using the following MathJax configuration: DEFAULT CONFIGURATION