webpack.github.io - Header image is overly large in Firefox

[webcompat-bot]

URL: http://webpack.github.io/docs/what-is-webpack.html
Browser / Version: Firefox 36.0
Operating System: Mac OS X 10.10
Problem type: Looks like the website has a bug.
Site owner: No

Steps to Reproduce

1. Navigate to: http://webpack.github.io/docs/what-is-webpack.html
2. Notice very large image and a need to scroll to read the text

Expected Behavior:
Works properly in Chrome

Actual Behavior:
Image is overly large

[karlcow]

It looks like a very similar issue than https://bugzilla.mozilla.org/show_bug.cgi?id=1138482
min-width: 0 on a parent element doesn't fix it though.

The parent is flex and the image is "max-width: 100%;"

@dholbert an idea?

[dholbert]

Yup, similar to that bug indeed.

The image in question is buried inside of two nested flex containers (both with class="row").

At both levels, the flex item (the ancestor of the img that is a child of a flex container) needs "min-width:0", or else it'll size to its min-content width, which is huge because of the huge image.

So, the rules for ".row .col-md-9" and ".row .col-md-12" both need "min-width:0" added to them. (It's possible all of ".col-md" rules want this treatment, for consistency & in case any of them happen to contain wide-yet-shrinkable content.)

I verified locally (using devtools) that adding this style fixes the issue.

[magsout]

@dholbert 👍

Just make a PR with your idea and it merged.

Fixed now

[dholbert]

Thanks!