CSS Reset for better Flexbox and CSS Grid responsive layout [PostCSS plugins]

This is a CSS Reset for Flexbox and CSS Grid which helps you to avoid issues in responsive layouts. It is one simple CSS rule which I noticed in a UI framework. There aren’t any odd consequences and I wish it was by default in all browsers.

Edit:// Thats for pointing out that this css code reset was added to Bootstrap framework, but then it was removed. I added a section with explanation at the end of this blog post.

In case you don’t know about css normalizers and css resets, you can check this blog post. Most of them don’t solve flexbox issues. Flexbugs is a list of known bugs and flexbox issues. If you are using flexbox and something is not working, you can find a solution there.

The question is:

How to use workarounds of flexbox issues in my project?

You can use a tool for transforming your CSS. PostCSS is a great tool which helps you to improve your CSS by their pre-processing or post-processing. It provides a great modular system with a lot of plugins and it integrates well with any build javascript tool.

If you never used PostCSS before, you should consider it in your future projects. Autoprefixer is perhaps the most popular plugin which adds vendor prefixes to CSS. You can find other plugins to fix css issues in plugins list, for example a plugin which solves 100vh issue in mobile browsers.

PostCSS Flexbugs Fixes is a PostCSS plugin which fixes some issues from Flexbugs list. Both Create React App and Next.js integrate PostCSS with Autoprefixer and PostCSS Flexbugs Fixes plugins.

Most Flexbugs issues are related to Internet Explorer browser. Nowadays, you don’t really need to care much about Internet Explorer, but don’t forget to double check this.

There is an issue which is very common in flexbox layout. It’s not an issue per se, but the specification of flexbox, which says:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).

If we take a look at Automatic Minimum Size of Flex Items:

The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties.

If you don’t know this rule, it can make some unexpected behaviour in your layout [1], [2] and you can find blog articles dedicated to this behaviour.

Here is one example you can see in all browsers. Let’s say you want to truncate labels in a flexbox layout.

See the Pen Flexbox issue by Andrej Gajdos (@andrej_gajdos) on CodePen.

And here is the fix:

See the Pen Flexbox issue – fix by Andrej Gajdos (@andrej_gajdos) on CodePen.

This is just one example, but you will come across similar funky issues in your flexbox and css grid responsive layouts in different browsers.

Some time ago, when I was working on a freelance React project, I decided to try out Rebass UI components. As I was working on this project, I didn’t have any layout issues. Later, I decided to remove Rebass because I felt like I didn’t really need it. When I removed Rebass, I had several issues in regards to auto minimum size of flex items in my responsive layout. Then I found out that Rebass uses min-width: 0px as a reset rule for its components.

I was thinking it would be great to have this rule available for flex children elements. I decided to open an issue in PostCSS Flexbugs Fixes to add this rule into the plugin, but unfortunately it was declined.

After several months I was working as a freelance developer on a marketing website in Next.js. I made the whole layout responsive using CSS Grid, but when I checked the project on my iPhone, there was an overflow issue in mobile Safari browser. It was interesting to don’t see this issue in other mobile browsers or desktop browsers. It took me a few hours to find out that CSS Grid inherited Flexbox’s behavior with min-width: auto.

I came across the same unexpected behaviour in my responsive layout for the second time. When I did some research, I found Dave Rupert’s article which talks more about form elements and replaced elements in CSS Grid. You can find there a CSS reset, but you need to add a class to each grid element in your HTML code. I was thinking of creating a PostCSS plugin, which could solve this issue effectively in my React and Next.js projects.

I decided to create two separate PostCSS plugins in case I will want to add other reset rules for flexbox or grid layouts.

Both postcss-flexbox-reset and postcss-grid-reset do only one simple thing:

/* Input example */
.foo {
  display: flex;
}

.foo-grid {
  display: grid;
}

/* Output example */
.foo {
  display: flex;
}

.foo > * {
  min-width: 0;
}

.foo-grid {
  display: grid;
}

.foo-grid > * {
  min-width: 0;
}

This css rule was added to Bootstrap framework and then it was removed. The reason is that when someone updated to Boostrap version with this rule (4.5.0) in developed UI, the whole layout was broken. It’s not surprising because all developed layouts were created with flex or grid items min-width: auto and flex and grid items dimensions are different now. This reset works very well in new projects, but it perhpas doesn’t work well in already created code bases. CSS normalizers and CSS resets in general don’t work if you add them to developed projects. This is something that should be done in the beginning of the project.

How to use these plugins in React projects

Create React App doesn’t support adding new PostCSS plugins. There are other ways to achieve that, but you would need to maintain the configuration and scripts yourself.

The best option seems to be the CRACO project which adds a configuration layer on top CRA. You can find an example of how to add other PostCSS plugins. Adding PostCSS plugins to Next.js projects is much easier.

Conclusion

This blog post is about unexpected behaviour in Flexbox and CSS Grid responsive layout. I can’t believe I wrote a blog post about a single CSS rule min-width: 0. When I used Rebass UI components, this rule is available for its UI elements. I didn’t come across any odd consequences and I wish it would be available in all my future projects. I decided to create two PostCSS plugins for better maintainability, postcss-flexbox-reset for Flexbox and postcss-grid-reset for CSS Grid.

I Hope, you found this piece of content helpful and it will make you more productive in implementing responsive layouts. If you think postcss-flexbox-reset and postcss-grid-reset should transform some other css rules, don’t hesitate to contact me, PRs are open too.