In Google Chrome Version 91.0.4472.77 (Linux) the checkbox or radio button belonging to a multiple choice option disappears if the paragraph of text after it takes up to much horizontal space. This only happens if the line of text cannot be broken, for example if it doesn't contain any whitespace, or if it's a long MathJax formula (see screenshot_1.png). The option can still be selected by clicking the text, but there is no indicator showing it is selected. This does not happen in Mozilla Firefox (see screenshot_2.png). I haven't tested it in any other browsers, yet.

Additionally, the rest of the overflowing line is not displayed at all. This should also be fixed, so that students with a small screen aren't at a disadvantage in a test with long formulas.

Steps to reproduce:

1. Create a quiz
2. Add a multiple choice question with one option named "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
3. Preview the quiz in Google Chrome on a small browser window (<= 1920px wide)

What I expected:

• The option and it's checkbox/radio button should be completely visible.

What actually happens:

• The checkbox/radio button is not visible and the text is cut off without any possibility to scroll.

Solution:

The problem with the disappearing checkbox can be fixed by setting flex-shrink: 0 in the input's style. The problem with the overflowing line can be fixed by giving the containing div the style overflow-x: auto, so that a horizontal scrollbar is displayed if necessary (see screenshot_3.png).

I will prepare a patch if nobody disagrees with my solution.