USWDS - Flex: Test and ensure flex shorthands work across browsers.

[mejiaj]

Description

Fixes #3386. This should ensure flex properties work across all browsers. Currently flex-fill has been known to cause issues in IE11.

Additional information

Include any of the following (as necessary):

• Relevant research and support documents
• Type of content review needed: stylistic or copy editing
• Screenshot images
• Notes

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[mejiaj]

Added 0% values to flex shorthands to get them working in IE11. Based on this guidance by Philip Walton.

I've also created this flex test page here.

Problem

Unitless flex shorthand is causing incorrect widths in IE11.

Firefox

IE11

---

The only problem left is minification from CSSO keeps stripping the % from 0%. This was fixed in the latest release https://github.com/css/csso/releases/tag/v4.0.3

But that change hasn't made it to the plugin we're using
https://www.npmjs.com/package/postcss-csso

[thisisdano]

I was able to update postcss-csso to use the most recent csso so I think this PR is good to go!

[thisisdano]

Modified to use 1 as a shrink value. This prevents elements from extending beyond the boundaries of the flex parent:

Before

After

[mejiaj]

Everything looks good. Thanks for the change!