Flex layout issue in IE11 (includes fix suggestion)

[jkamleh]

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

react-toastify/scss/_toast.scss

Lines 39 to 42 in 7ec5040

	&-body {
	margin: auto 0;
	padding: 6px;
	}

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

[bmolnar2]

Hi all!

That change on the body style, removing flex 1 1, cause as an another problem. Considering a ToastContainer with fixed width:

<ToastContainer
  newestOnTop
  closeButton={false}
  closeOnClick={false}
  transition={Slide}
  style={{ width: '591px', cursor: 'default' }}
/>

, the body's div does not grows with the container's size, but only with the content's grows. This leaves us with the situation of having oddly narrow toast messages:

instead of our desired width previously:

I gotta admit, I'm not an expert on CSS styles, but could not make the custom Toast content to stretch with it's outer div that is the direct child of the Toastify__toast-body div.

Do you have a workaround for this? Is the Toastify__toast-body div really stops the child div from stretching, if it's content does not make the div to grow?

EDIT:
Note, that we use Chrome, so tested in that browser. But the source of the problem is the same change.

[bmolnar2]

Never mind my question. I realized that I can just override the class style in a new scss file and include, that will override the body. :)

[jkamleh]

@bmolnar2 Hi Bence, I'm not sure what you mean when you refer to removal of flex 1 1. The proposed changes in PR #573 only add width: 100%; to toast body. Even the workaround I mentioned (e.g. your own code), by specifying .Toastify__toast-body only adds to the existing stylesheets (unless you override existing styles defined in the SCSS)?

[bmolnar2]

@jkamleh, sorry, I did not link the change. It wasn't #573 , but this: 468d545
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. :D)

[fkhadra]

@bmolnar2 tbh I don't remember why I've removed flex 1 1, maybe a mistake from my side. I'll dig deeper

[fkhadra]

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