Problem using flex container with mathjax inline math

I am using the solution given in How to reduce vertical space between items inside flex container? which worked well.

But when I added mathjax related item, now alignment is broken for some reason.

I really like to use flex box as it solves some problems, but must also use mathjax.

I will show below the smallest example showing the problem. This uses mathjax and uses mathjax class called mathjax-inline which mathjax knows about when it reads the page.

code is all self contained.

Example using display:flex

<!DOCTYPE html> 
<html lang='en-US' xml:lang='en-US'> 
<head>    
<script>window.MathJax =
{ tex:
   { tags: "ams",
     maxBuffer: 40*1024,
     packages: {'[+]': ['textmacros']},
     macros: {  },
     options: { ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' },
     loader: { load: ['[tex]/noerrors','[tex]/textmacros'] } }};
</script>
<script async='async' id='MathJax-script' 
        src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' type='text/javascript'>
</script>    
<STYLE>    
.MYcontent {
  max-width: 660px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
}

.MYcontent > * {
  margin-top: 2px;
  margin-bottom: 2px;
}    
</STYLE>    
</head>
<body>
<div class='MYcontent'>

And the point <span class='mathjax-inline'>\(x_0 = 4\)</span> is inside this domain.
The domain of <span class='mathjax-inline'>\(p(x)=\sqrt {x}\)</span> is

</div> 
</body> 
</html>

The web page shows as

But the above is wrong. It should be inline, here is what happens when commenting out the everything inside <STYLE>....</STYLE> above. i.e. remove flex related style.

You see, display:flex caused the mathjax math to break into new lines each. Which is wrong.

I have no control over the code generated above, which is

  <span class='mathjax-inline'>\(x_0 = 4\)</span>

As this is generated by tex4ht when using mathjax mode.

Is there a way to adjust/modify flex setting so it does not break the inline math like this when using mathjax?

Here is a fiddle to try. For some reason this gives mathjax error when run from here. May be fiddle does not work with scripts.

But above HTML code works fine inside browser. I made sure it works OK before posting it.

.MYcontent {
  max-width: 660px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
}

.MYcontent > * {
  margin-top: 2px;
  margin-bottom: 2px;
}

<!DOCTYPE html> 
<html lang='en-US' xml:lang='en-US'> 
<head>

<script>window.MathJax =
{ tex:
   { tags: "ams",
     maxBuffer: 40*1024,
     packages: {'[+]': ['textmacros']},
     macros: {  },
     options: { ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' },
     loader: { load: ['[tex]/noerrors','[tex]/textmacros'] } }};
</script>
<script async='async' id='MathJax-script'
        src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' type='text/javascript'>
</script>


</head>
<body>
<div class='MYcontent'>

And the point <span class='mathjax-inline'>\(x_0 = 4\)</span> is inside this domain.
The domain of <span class='mathjax-inline'>\(p(x)=\sqrt {x}\)</span> is

</div> 
</body> 
</html>

Update

By trial and error, found that adding DIV around the whole text in question makes the inline math work in the above example.

<body>
<div class='MYcontent'>

<DIV>
And the point <span  class='mathjax-inline'>\(x_0 = 4\)</span> is inside this domain.
The domain of <span  class='mathjax-inline'>\(p(x)=\sqrt {x}\)</span> is
</DIV>

</div> 
</body>

Which now shows as

But the software I use to convert latex to HTML which is tex4ht, does not put these lines in DIV's.

So need a solution that does not require adding explicit DIVs around each piece of text with mathjax inline math in it. Otherwise using flex will not be possible for me as I must use mathjax as generated by tex4ht.

Solution

But when I added mathjax related item, now alignment is broken for some reason.

This issue has nothing in particular to do with MathJax. In a DOM view of your page, the Flex container has five child nodes: a text node, a span, a text node, a span, and a text node. These being the immediate children of the container, they constitute the Flex items to be laid out. Your particular container is configured to lay out its items in a column, so that's what you see.

But the above is wrong. It should be inline,

The text nodes and spans would be laid out inline in the default layout, but you're not using the default layout for them. You're using Flex. The Flex container manages the layout of the boxes for its immediate children. That's its point.

Update

By trial and error, found that adding DIV around the whole text in question makes the inline math work in the above example.

Trial and error, maybe plus a comment that suggested exactly the alternative you now describe?

Yes, if you put a div or some other container around the text and spans, making that the immediate child of the Flex container, then it is that intermediate container that is the Flex item, subject to layout relative to its siblings, if any, according to Flex. Its content is not subject to Flex layout (unless you make the intermediate element a Flex container of its own).

So need a solution that does not require adding explicit DIVs around each piece of text with mathjax inline math in it.

That is a somewhat myopic characterization of the issue. In order to use a Flex layout at all, what you need is for each collection of content that you want Flex to lay out as a unit to be its own node, with that node being the immediate child of the Flex container. When that unit has internal structure (in a DOM sense), the node to be laid out needs to be some kind of container element. A div is natural for this, or a p could work, but if the units consist entirely of (default-)inline and/or inline-block content then a span could work too, or any other (default-)inline element, really.

If your current processing pipeline is not emitting HTML that satisfies that requirement then you need to update that pipeline somehow. Or, as you say,

Otherwise using flex will not be possible

If your source TeX document and/or tex4ht cannot be adjusted to achieve that, then possibly you can add another stage. For example, an XSLT processor that supports HTML as an input form seems like a good prospect for massaging the HTML generated by tex4ht.

With that said, it remains unclear to me why it is important to you to use Flex. You don't need to answer that -- just know that Flex was never designed for or intended to lay out principally textual content. That's what TeX is for, actually, and you're fighting that by layering invasive styling changes on top of the tex4ht output.

If you want to embed fragments generated by tex4ht in a larger document, then my first impulse would be to treat the embedded fragments as opaque units as much as possible. That would definitely mean putting the embedded fragments each in its own container element, probably a div, and it would mean as much as possible avoiding applying styles, other than those provided by tex4ht / MathJax, to the embedded content.