Flexbugs

While updating styles for Enectiva to make it more responsive I came across a problem with flexbox — there are some restrictions in particular browsers.

For instance, one issue I encountered was that some HTML elements can’t be used as flex containers. For instance, we wanted to use fieldsets because of their semantics both alone and combined with legends and make them flex containers. This, however, doesn’t work in Chrome. The following example shows that using the same CSS properties (display: flex; flex-flow: row nowrap) the elements inside the fieldset are in a row in Firefox but not in Chrome.

To make it work in all browsers, we had to wrap the content of the fieldset in a div which serves as a flex container. You can try it live. It is not a perfect solution but it works.

CanIUse is a good tool to find restrictions not just about flexbox. More flexbugs, their solutions and progress in their solving are described here.