Toasts in IE11

[ffoodd]

Fixes #28341

I don't really know what happens here, I tried several known bugs and fixes without any luck. So here's my solution:

1. flex-basis seems better than fixing width since it has no impact on non-flexible toasts
2. our centered examples couldn't work anyway on IE11 because of flexbugs #3
3. v4-only because IE11.

[mdo]

Wondering if we could do width: 350px; max-width: 100%;? I believe I used the max-width to account for narrow mobile devices.

[ffoodd]

All toasts would be 350px wide (or 100%), whereas for now it's fluid under 350px.

Our toasts examples currently don't reach 350px, so they'd become wider.

I think it'd be a good idea to normalize toast size, however it could come back as a bug.

flex-basis shouldn't have any side-effect and won't change current behaviour.

Should at least be done on v5 though.

What do you think for v4? Want to give width a try?

[mdo]

Oh word, yeah that makes sense then lol. Let's skip the width thing for now.

[axzx]

This change broke the appearance of toasts on Firefox.
Now, instead of a single toast matching the height of the alert I have in the center, a 350x350px square is displayed.

[XhmikosR]

@axzx please make a new issue. Commenting in old issues is moot.