Have you ever came across an overflow issue in your responsive layouts?
For example, you can see an overflow issue here https://codepen.io/andrej_gajdos/pen/yLJdZVM
There is one simple rule, which fixes this issue and doesn't have any odd consequences:
.flex-container > * {
min-width: 0;
}
You just need to add min-width:0; rule to all direct descendants of flexbox and css grid container.
You can see the fix of the previous layout here https://codepen.io/andrej_gajdos/pen/MWeMLbo There is another example here https://codepen.io/andrej_gajdos/pen/YzWozKw and the fix is here https://codepen.io/andrej_gajdos/pen/wvWLvwq
I came across similar funky issues in my flexbox and css grid responsive layouts in different browsers.
This is not an issue, but a specification of flexbox and css grid inherited it.
I decided to create two PostCSS plugins, which solve this unexpected behaviour, postcss-flexbox-reset https://github.com/AndrejGajdos/postcss-flexbox-reset and postcss-grid-reset https://github.com/AndrejGajdos/postcss-grid-reset You can read the whole story why I created them here https://andrejgajdos.com/css-reset-flexbox-grid-responsive-layout/