Проблема с использованием гибкого контейнера со встроенной математикой mathjax ⇐ CSS

[Anonymous]

Я использую решение, приведенное в разделе «Как уменьшить вертикальное пространство между элементами внутри гибкого контейнера?» это сработало хорошо.
Но когда я добавил элемент, связанный с mathjax, теперь выравнивание по какой-то причине нарушается.
Мне очень нравится использовать flex box, поскольку он решает некоторые проблемы, но я также должен использовать mathjax.
Ниже я покажу самый маленький пример, показывающий проблему. Здесь используется mathjax и класс mathjax под названием mathjax-inline, о котором mathjax знает, когда читает страницу.
код является самодостаточным.
Пример с использованием display:flex

Код: Выделить всё

window.MathJax =
{ tex:
{ tags: "ams",
maxBuffer: 40*1024,
packages: {'[+]': ['textmacros']},
macros: {  },
options: { ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' },
loader: { load: ['[tex]/noerrors','[tex]/textmacros'] } }};




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

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




And the point \(x_0 = 4\) is inside this domain.
The domain of \(p(x)=\sqrt {x}\) is

Веб-страница отображается как


Но приведенное выше неверно. Он должен быть встроенным, вот что происходит при комментировании всего, что находится внутри .... выше. т.е. удалить стиль, связанный с flex.


Понимаете, display:flex приводит к тому, что математические вычисления mathjax разбиваются на новые строки. Это неправильно.
Я не могу контролировать код, сгенерированный выше, а это

Код: Выделить всё

  \(x_0 = 4\)

Поскольку это генерируется tex4ht при использовании режима mathjax.
Есть ли способ настроить/изменить настройку гибкости, чтобы она не нарушала встроенные математические вычисления, как это происходит при использовании mathjax?
Вот скрипт, который можно попробовать. По какой-то причине при запуске отсюда выдается ошибка mathjax. Возможно, скрипка не работает со скриптами.
Но приведенный выше HTML-код отлично работает внутри браузера. Прежде чем опубликовать, я убедился, что все работает нормально.

Код: Выделить всё

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

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

Код: Выделить всё

window.MathJax =
{ tex:
{ tags: "ams",
maxBuffer: 40*1024,
packages: {'[+]': ['textmacros']},
macros: {  },
options: { ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' },
loader: { load: ['[tex]/noerrors','[tex]/textmacros'] } }};








And the point \(x_0 = 4\) is inside this domain.
The domain of \(p(x)=\sqrt {x}\) is

Обновить
Методом проб и ошибок выяснилось, что добавление DIV вокруг всего рассматриваемого текста заставляет встроенные математические вычисления работать в приведенном выше примере.

Код: Выделить всё

And the point \(x_0 = 4\) is inside this domain.
The domain of \(p(x)=\sqrt {x}\) is

Это теперь отображается как


Но программное обеспечение, которое я использую для преобразования латекса в HTML, а именно tex4ht, не помещает эти строки в DIV.
Поэтому нужно решение, которое не требует добавления явных DIV вокруг каждого фрагмента текста с помощью встроенной математики mathjax. В противном случае использование flex будет для меня невозможным, поскольку мне придется использовать mathjax, сгенерированный tex4ht.

Подробнее здесь: https://stackoverflow.com/questions/798 ... nline-math