CSS Reset for better Flexbox and CSS Grid responsive layout

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/