Is it possible to wrap Latex blocks into a div, like it's done with code?

[queirozfcom]

Description

Latex Blocks overflow and break the HTML page's style when the viewport is small (using MathJax renderer)

This is how I'm writing this Latex block in the qmd file:

$$
Output_{Simplest\ Possible\ LM} = \frac{\#\ valid\ words\ in\ input\ sequence}{\#total\ words\ in\ input\ sequence}
$$

Is it possible to wrap the Latex cell inside a div as we have with code blocks? (example below)

[queirozfcom]

I've already tried adding overflow-x: scroll to all sorts of CSS selectors:

mjx-container, mjx-math, mjx-mtable, mjx-table, mjx-itable, .MathJax_Display, .MathJax, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: scroll;
}

[baptiste]

This seems to work though

---
title: "Untitled"
format: 
  html:
    max-width: 200px
    include-in-header: 
       - text: |
          <style>
            .MathJax {
             overflow-x: auto;
             overflow-y: hidden;
            }
          </style>
---

$$
\alpha = \frac{\text{this is verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrry long}}{\text{indeed}}
$$

[queirozfcom]

For me, it doesn't =/

You can see the CSS style is being picked up

[queirozfcom]

I event tried the good ole !important

[queirozfcom]

What I ended up doing (not as pretty as mathjax but at least it doesn't mess up the scrolling bars)

• using webtex instead of mathjax
• using this CSS code:

  .math.display {
   max-width: 100%;
  }
  

OUTPUT:

[mcanouil]

It would help to specifically target your use case if you could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

Also, while screenshots can be useful, without alternative texts and no code users with impaired vision won't be able to use/understand this thread.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[mcanouil]

Some related solutions:

• Automatic column width for latex equations in html page #2170 (reply in thread)
• Automatic column width for latex equations in html page #2170 (reply in thread)

Additionally, you could tweak MathJax config:

MathJax.Hub.Config({
  MathZoom: {
    styles: {
      "#MathJax_Zoom": {
        overflow: "auto ! important"
      }
    }
  }
});

[queirozfcom]

Thank you very much @mcanouil

This answer did the trick (enclosing the $$ block with triple colons (:::) and adding an inline CSS style