Inconsistent cross-browser behavior for .container

[maiertech]

This issue I encountered with Bootstrap v4 alpha 4.

You can replicate the issue by viewing this page in latest Chrome on macOS and latest Safari on macOS: https://test.maier.asia/tags/pancetta/.

In Safari the post list contained in main.container takes up the entire width defined by max-width. On Chrome main.container is much smaller than its max-width.

I am not sure if this is a Chrome bug or a Safari bug or a Bootstrap bug. Which of the two renderings is expected behavior?

And should Bootstrap address this e.g. by adding a min-width?

[mdo]

Super interesting. Definitely a bug on someone's end lol.

[mdo]

I recall another issue related to this and I imagine we'll end up swapping back to width, maybe with a max-width: 100% for bulletproofing.

[jmahc]

This is peculiar.

In order to replicate Safari's rendering when using Chrome, simply add the width property equivalent to the max-width property.

[slavanga]

@mdotasia your container is a flex item because you set display: flex on the body tag.
Adding width: 100% to the container seems to work well in this case.