Styling issue with flexbox

[scaljeri]

When the parent of a math formula has display: inline-flex something goes wrong with the position of the values in a fraction. Here is a demo

As you can see the values in the denominator are not centralised.

In my case I need to align the formula with surrounding text, which is why I'm using flexbox. Is there an easy fix for this?

[dpvc]

The problem is an interaction with automatic line breaking and your use of inline flex boxes. MathJax needs to measure the size of the container in order to do line breaking, but for elements that shrink-wrap their content (like inline-flex, inline-block, and table cells), the natural width is 0, so MathJax can't tell how big the lines should be.

In your case, the numerator and denominator of the fractions are thinking they are too wide, and are trying o do line breaking, and when that happens, the parts are left justified. That is the left justification you are seeing (rather than centering).

So one solution would be to turn off line breaking. Another would be to set an explicit line breaking width (rather than have MathJax try to determine the container width). A third would be to not use inline-flex.

You say you need to align the formulas with surrounding text, but I don't understand what you are trying to accomplish. Inline-equations (like yours) should already be aligned with the surrounding text. If you could be more explicit about what is not aligned for you, or what aligning you are trying to do, perhaps we can help. In any case, even if you are trying to align the formula, I don't think that setting it to inline-flex is what you really want to do. I would expect that you would want the common container for the text and the math to be the inline-flex box, and then have the text in some kind of container within the flex box, with the math in another container inside the flex box. Putting the math directly in an inline-flex box won't help you to align it with the surrounding material.

[scaljeri]

Thanks for the detailed explanation. Considering your comment I think the first thing I should do is find out why I need flex-box in the first place, maybe I've messed somewhere else. Give me some time to figure this out! cheers

[dpvc]

PS, in the next release, we have altered the mechanism for determining the container width for line breaking, so that should help. We have also changed how fractions with line breaks operate so that the broken elements are centered as a unit. See #1479 and #1539 for details.

[scaljeri]

Very nice, I'm looking forward to that release. Any idea yet when this is going to happen. But still I think I need to face this problem anyway :)

[dpvc]

It is at least a month away. Yes, you probably need to figure out your situation before then anyway.