Avoid vertical overflow when using KaTeX with horizontal overflow

Question

I use KaTeX to display equations on a webpage, and I would like to make large equations horizontally scrollable (especially on mobile). However, when I add the CSS rule

.katex {
    overflow-x: scroll;
}

also a vertical scroll bar appears, and the equation becomes slightly scrollable vertically. So apparently the height of the contents of .katex are bigger than the box itself. I can adjust the size of the .katex box manually by adding

min-height: 100px;

however then the height of equations is not dynamically assigned anymore.

I don't understand why the .katex-box is apparently smaller than its content. How does that happen? As far as I see there are no CSS rules that limit the height or anything.

Here is a minimal working example.

Answer 1

Some recently added documentation suggests a reasonable workaround for this behavior:

• Add an overflow-y: hidden rule
• Or equivalently, use overflow: scroll hidden (or overflow: auto hidden).

I've been using this workaround for a while, and haven't seen any improperly clipped math expressions. It's confusing, but seems to work.