MathJax 3: Inline Math and overflow-x

Question

It is very easy to handle overlapping display math.

We can add a class named has-jax to all display math elements...

window.addEventListener('load', (event) => {
  document.querySelectorAll('mjx-container[jax="CHTML"][display="true"]').forEach(function(x){
      x.parentElement.classList.add('has-jax');
  });
});

and then define in our css file

.has-jax {
  overflow-x: auto;
  overflow-y: hidden;
}

But is there a way to add overflow-x: auto to inline math?

The problem is that overflow-x can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflowed.

Edit

The solution below results in wrong aligned inline-math in Firefox browser on Linux Mint:

If I delete display:inline-block from the solution below the x+x+y is well aligned but the inline-math overflows the box.

Answer 1

You don't need to use .has-jax, but can style mix-container itself as follows:

mjx-container {
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

<div style="width:15em; border: 1px solid; padding: 3px 5px">
This is some text with a long in-line math expression
\(a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\)
that we hope will have a scroll bar!  This math \(x+y+z\) should not.
Long display math also gets a scroll bar:
\[a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\]
</div>

This will also provide display-mode math with scroll bars if they are too long. If you want to do this only for inline math, then use mjx-container:not([display]) instead.

Here is a screen snapshot of the result: