Consider adding flexbox troubleshooting to README

[renatodeleao]

Hello!
There's already a couple of issues (#822, #1056) related with the problematic usage of flexbox. We're in 2019 and now everyone either uses it or display: grid for creating layouts (floats are dead).

I am migrating an old Rails codebase from sprockets to webpacker and without changing a single line of CSS, just migrating the bundling part, i was breaking a lot of tests. Just spend a full day bashing my head against the screen trying to figure out what have i done, as everything was working before.

The issue was that my new autoprefixer config had this subtle difference: flexbox: no-2009. Which made total sense: we're in 2019, browser support as per .browserlistrc of the project is last 4 version, not ie < 10 so why add "garbage" css to my bundles?

According to Autoprefixer

flexbox: "no-2009" will add prefixes only for final and IE versions of specification.

Which is not enough to make correct tests rendering.

Proposal

Using this #822 (comment), I got the following output:

Capybara: 2.4.4
capybara-webkit: 1.15.1
Qt: 5.5.1
WebKit: 538.1
QtWebKit: 5.5.1

A quick google search for WebKit: 538.1 lead me to believe that we're taking about a circa 2013/2014 engine which matches to something like Safari 8 kind of browser according to this table

The comment also states:

Which CSS properties are supported will depend on the version of Qt you have installed.

We can't have a one size fits all, be we can advise sensible defaults. Based on all this i think adding a section to readme would be really helpful, here's a sample:

---

Flexbox

For testing bundles, use the oldest flexbox syntax possible. If you're using autoprefixer make sure that, for test environment, that's last 8 versions as browser targets and also make sure you haven't set flex: 'no-2019' config property

---

Happy to make a PR if you guys agree!
Thanks for the work on this!
Cheers ✌️