Overflow Issue

(Note: This is not an issue with MathJax as I only have the issue on Tutor LMS lesson pages.)

I wish to insert long equations into a Tutor LMS page that are rendered using MathJax.

I am using “overflow-x: auto” on such elements so that a horizontal scroll bar appears.

This works as expected on a standard WordPress page, as shown below.

View post on imgur.com

However, if I insert the same content on a Tutor LMS lesson page, it instead causes the rest of the page to overflow.

View post on imgur.com

I actually found out how to fix this by using the following CSS:

.tutor-single-lesson-wrap {
display:block;
}

However, as expected, this then causes the sidebar to appear above the lesson content.

I have tried the following as I saw it on some recent posts here related to similar issues.

.single-courses .tutor-row {
flex-wrap: wrap;
}

However, it does not work and I believe that fixes a separate issue not related to mine.

I believe the solution is something similar to the answer found here but applied to a lesson page.

https://www.ads-software.com/support/topic/cant-edit-quiz-due-to-question-length-in-tutor-lms/

However, adapting that answer to the lesson page is a bit beyond my understanding of CSS.

Therefore, any help is greatly appreciated! Thanks!