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>