Fix IE11 layout problem caused by flex-basis: auto

[phacks]

As mentioned in #2676, IE11 suffers from several layout problems where the user would have to horizontally scroll to see all content and/or images would get absurdly distorted.

philipwalton/flexbugs#170 seems to show that IE11 shows inconsistency when using flex-basis: auto (or the shorthand version: flex: X Y auto).

I tried changing auto by 0px in such statements, and it looks like it fixed many of those layout problems in the demo app:

🙁Before (IE11)	🙂After (IE11)

I also had to remove the display: flex and flex-wrap: wrap on SegmentsField because IE11 has many problems with flex-wrap: wrap. The wrapping still works (Chrome + IE11) though.

Navigating the demo app on Chrome showed me no visual regression, and <Aside /> components (for which the flex-basis: auto were introduced) still work as expected:

[Kmaschta]

Thank you!

[fzaninotto]

This needs thorough testing across multiple browsers

[phacks]

@fzaninotto of course — how would you like me to proceed?

[fzaninotto]

We use tools like BrowserStack. But I'll do the tests on this one to make sure it breaks nothing - we've had regressions in the past due to small changes in the layout CSS.

[phacks]

@fzaninotto Hi! Did you have time to run some browser testing on this issue?

Let me know if I can be of any help 🙂

[phacks]

@fzaninotto Hi! Do you think you will have some time to test this PR soon? cc @Kmaschta

Thanks!

[Kmaschta]

I booked 15min tomorrow to test that branch locally with Browserstack

[Kmaschta]

I tested these layouts on several browsers (latest version), it is OK for me 👍

Here are the screenshots for each of them:

Google Chrome (Windows)

Internet Explorer 11 (Windows)

Mozilla Firefox (Windows)

Safari 12 (MacOS)

Edge (Windows)

Opera (Windows)

[phacks]

@Kmaschta thanks for the review! @fzaninotto Do you think this PR can make it for the 2.7.2 / 2.8.0 milestones?

[fzaninotto]

Not good: I see an additional scrollbar at the bottom of the Comment List in the simple demo (Chrome, Ubuntu):

and at the bottom of the Posters list in the demo (Safari, macOS)

and on Windows as well:

So I can't merge this PR as is.

[phacks]

@fzaninotto Oops, I can work on it next week, will keep you updated!

[phacks]

@batbyR found another, cleaner solution that get rid of the superfluous scrollbars at the bottom! You may have a look over at #2969