Why Is My Image Being Distorted (shrunk) In Firefox?

This problem occurs on Firefox. On Chrome all is well. I have a magnifying glass image next to my search fields. However, on Firefox the image is being distorted (shrunk) and I ca

Solution 1:

An initial setting of a flex container is flex-shrink: 1 (source).

This means that, by default, flex items are allowed to shrink below their initial size in order to fit inside the container.

For your layout to work in Firefox you need to disable flex-shrink on the image.

Add this to your code:

.search_button { flex-shrink: 0; }

revised fiddle

As to why this is needed in Firefox but not Chrome, I would say that flex layout is relatively new (CSS3) and different browsers have different implementations and interpretations of spec language.

---

UPDATE

As pointed out by @Oriol in an answer, another initial setting of a flex container is min-width: auto on flex items. This means that a flex item cannot be smaller than the size of its content.

Chrome has implemented this spec instruction. It appears that Firefox has not (at least in terms of replaced elements?), and the flex item is shrinking below the inherent size of the image.

More details here:

• Why doesn't flex item shrink past content size?

Solution 2:

The difference is due to the Implied Minimum Size of Flex Items.

Inputs are replaced elements after all, so they may behave differently in various browsers.

In this case, it seems the image in the input determines its implied minimum size in Chrome, but not in Firefox.

If you use min-width: 0 in Chrome, it will behave like Firefox.

You should probably use flex-grow to specify grow ratios, instead of things like width: 100% and then letting the flex items shrink.