Firefox only, Left Margin prioritized, causing layout overflow on right

Setup

Browsers and versions: Firefox 66.0.3
MediaWiki version: 1.27.5
Database version: MySQL 5.6.22
PHP version: 5.5.38 (apache2handler)
Foreground version: 2.1.0
Extension version (if connected to the issue):

Issue

I have transcluded graphs and tables, which are fixed width items (roughly 1000px) in a private wiki (so not publicly visible).

I believe you can reproduce the issue by including a wide image of a large size.

When any browser window is very wide there is no issue, because all the content can be seen.

In Firefox only, as I narrow the browser window, the content disappears on the right even if there is sufficient whitespace (left margin area) to display the content.

In Safari, and Chrome, the left margin is consumed first if the window is narrowed so the content remains visible for narrower widths compared to Firefox.

I do see in Firefox that in very wide windows, the margins are asymmetric with much more white space on the left side compared to the right side.

Is there a setting or CSS customization I can apply that will improve the behaviour for Firefox while maintaining the good functionality in Safari/Chrome?

I have not tested in IE since I don't have access to a Windows machine.

Thank you,

Gregg

jthingelstad / foreground

Firefox only, Left Margin prioritized, causing layout overflow on right #346

Setup

Issue