Some inline formulas cause a height issue

[mzy0624]

Issue Summary

.issue {
    max-height: 400px;
    overflow-y: auto;
}

I have a div element, where when the height of content > 400px, page scrolling will occurs.

But there is an issue: when I use some inline formulas like $\frac{a}{b}$, $\sum _{i=1}^n$ ..., page scrolling will occurs even if the height of content < 400px. For example:

The corresponding code:

<div style="text-align: center; margin: 0 auto; border: 1px solid #ccc; padding: 10px;">
    <div class="issue">
        The issue occurs $\frac{1}{2}$
    </div>
</div>

The corresponding code:

<div style="text-align: center; margin: 0 auto; border: 1px solid #ccc; padding: 10px;">
    <div class="issue">
        The issue doesn't occur $a+b=c$
    </div>
</div>

Technical details:

• MathJax Version: 3
• Ubuntu 24.04
• Browser: Chrome 133.0.6943.126

I am using the following MathJax configuration:

MathJax = {
    tex: { 
        inlineMath: [['$','$']], 
        displayMath: [['$$','$$']] 
    }
};

and loading MathJax via

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

[dpvc]

Try adding the CSS

mjx-mo > mjx-c,
mjx-mi > mjx-c,
mjx-mn > mjx-c,
mjx-ms > mjx-c,
mjx-mtext > mjx-c,
mjx-stretchy-h,
mjx-stretchy-v {
  clip-path: padding-box xywh(-1em -2px calc(100% + 2em) calc(100% + 4px));
}
mjx-math {
  padding: 0 ! important;
  margin: 2px 0;
}

I think that should take care of it for you. This is part of a change that has been made in v4 (now out in beta release).

[mzy0624]

The problem has been solved, Thanks!