Cover image

HTML Elements with Flex-box Quirks

July 8, 2019 · 2 min read

I have interviewed many frontend developers. One of the methods I have used during the candidate screening process is to give a CSS pair programming exam. The exam allowed my team to have an accurate way to rule out candidates that did not have strong HTML and CSS knowledge. Given that one of the current trends in the industry is to focus on frameworks, I find that the understanding of basic web fundamentals is lacking. Attention to detail is always an issue with young developers as well.

The setup for the interview was simple - the interviewing candidate would start a phone conversation with the interviewer. We would give them a collaborative link to a CodePen. After a few minutes of explanation of what we were expecting, they would start coding.

The task was simple; we asked them to create the styling for a simple login form. We provided the HTML, and they could not modify it. Using a picture of the solution as a guide, they would start.

The Problem

During about ~50 interviews with this method, we kept seeing the same issue. Young developers would rely heavily on flex-box and fail at aligning the content vertically within a fieldset. Even talented developers that nailed all the colors and understood the details struggled.

It turns out that the browsers have some nasty quirks when it comes to flex-box.

The Truth

Flex-box is buggy. Philip Walton has a great readme on his GitHub that breaks out all the intricate quirks with flex-box by the browser vendor. While flex-box came out in 2009, the spec got finalized in 2011. Years later, many of the bugs still exist.

Fieldset

In the exam above, the fieldset element was the biggest surprise challenge. In Chrome and Edge, the display: flex property does not get applied by the browser. This issue has been frustrating for developers for years. Years later, both Google and Microsoft have either punted on the bug or flagged it as "by design."

So avoid flex-box on fieldset. Unless you are using Firefox or Safari, it turns out they fixed this bug.

Button

The button element does not support the align-items property in Chrome. Safari does not support justify-content. Good news though, you can place the content within div or span.

Summary

Even though Safari fixed fieldset, the summary element can't be a flex container still.

Bonus - CSS Challenge

You can see the solution to the CSS exam below. Want to test your CSS skills? Fork the CodeSandbox and remove the CSS. See if you can reproduce the original without using flexbox.

Get My Newsletter

Sometimes I send stuff out. You might want to read it...

grouping of dots spread out from the center