I was quite surprised to learn that dealing with browser bugs is just part of writing CSS. There’s an excellent repository called flexbugs that documents various bugs in flexbox implementations across different browsers. Many of these issues are found in Microsoft Edge, which means you can often choose to ignore them depending on your project’s goals. However, some bugs also appear in Chrome, Safari, and Firefox.

For instance, I encountered a flexbug recently where the <summary> element can’t be a flex container in Safari. To work around this, I had to add an extra <div> inside the <summary> to serve as the flex element.

In the past, I might have reacted with frustration—questioning why this was happening but adopting a mindset of “Oh, there’s a browser bug; that happens sometimes!” feels much healthier and more productive than letting frustration take over.

There are at least three distinct ways your CSS can encounter issues:

1. The element doesn’t have the correct styles applied (for example, it should have background: blue, but it’s showing background: red instead).
2. The element has the correct styles, but they produce unexpected or confusing results due to a misunderstanding of the CSS specification.
3. The element has the correct styles that adhere to the specification, but a browser bug prevents it from being rendered correctly.

Now, let’s shift gears—here are some comics! 🙂