Flex layout issue in IE11 (includes fix suggestion)

Do you want to request a feature or report a bug? Bug

What is the current behavior? Using flex layout (Bootstrap 4) inside Toastify__toast-body class has issues rendering in IE11, works fine in latest Chrome. Example is with one fixed column width (col-md-3) and second column dynamic (col):

Proposed fix: As other users may encounter this while trying to support IE11, suggest adding width: 100%; style by default in https://github.com/fkhadra/react-toastify/blob/7ec50404e883ea88e9cab2019857ef96fb072776/scss/_toast.scss#L39-L42

I’m temporarily fixing this by applying the following in my CSS, please advise if this above recommendation is suitable, if so I can create a PR (or feel free to apply):

.Toastify__toast-body {
    width: 100%;
}

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.8.6, Windows, Internet Explorer 11

[fkhadra]

Ok, I remember why I did it… I forgot to revert this thing 🤣

[bmolnar2]

@jkamleh, sorry, I did not link the change. It wasn’t #573 , but this: https://github.com/fkhadra/react-toastify/commit/468d54513148ba1bcad5124640f8b8080ce176aa Probably I thought this bug was reported as one caused by the latter.

For my case, the solution was to override the style in SCSS. Obviously not with the change you proposed, but whatever is necessary (e.g. adding back flex 1 1).

The point is that you can customize certain class styles of the lib, so unless that was a change concerning every user, it doesn’t make sense to revert any piece of change for my case. (Not like anyone was considering it. 😄)