Flex 'Not Working'? 6 Most Common Flexbox Issues on Stack Overflow

Flexbox is easily one of the most powerful developments in CSS ever. But, its implementation has been confounding frontend and fullstack devs ever since it was introduced.

In the last year alone, 6,000+ new threads were posted on Stack Overflow with questions/issues on CSS flex (Source: Stack Overflow search)!

Similarly, Reddit, Quora, and every other platform that developers frequently use are also riddled with devs struggling to get this very powerful but often confusing concept to work for them.

We read through a few hundred threads across platforms to find these 7 issues that crop up most frequently when devs think that flex is not working for them.

If you think some flex related properties are not working in your code, go through these checks quickly to make sure that you are not making the same errors as those thousands of devs :-)

1. Are you using the correct syntax?

Make sure you are using the correct and latest CSS syntax throughout the code, particularly if you don’t write CSS too often.

It’s often easy to overlook small errors in CSS selectors or property names because default IDEs don’t do a good job at highlighting errors.

You’d be surprised how many times we have discovered display:flexbox instead of display:flex while reviewing our own code!

Consider using a CSS linting tool like Stylelint, which is great at spotting unintentional errors and enforcing best practices.

Fun(?) fact: display: box and display: flexbox used to be the correct syntax in the olden times, way back in 2009 and 2012!

2. Are you using 'display:flex' at the correct element (immediate parent)?

Remember that display:flex makes the direct children of the container it’s applied to, flex items. So, you’ll have to apply display:flex to the immediate parent of the items you want to distribute using flex.

Also, this applies to every level of your div structure. So, if you want to flex an element within a flex element, you must do it twice for both containers. For example, see the code below.

<div class="flex">
  <p>Hello World!</p>
  <div>
    <!-- Also, apply flex here -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</div>

3.Are you using flex-grow, flex-shrink and flex-basis correctly?

flex-grow: This property defines the ability of a flex item to grow beyond its initial size to fill any available space within a flex container.

flex-shrink: This property defines the ability of a flex item to shrink below its initial size to fit within the available space within a flex container.

flex-basis: This property defines the initial size of a flex item before any available space is distributed among the items in the container.

Here are 2 Stack Overflow examples on how these properties work-

Example 1:

Output

• In the above code, 50% of 300px, i.e, 150px is immediately assigned to the first item because of flex-basis: 50%;

• The remaining 150px space is initially empty because the flex-basis of the other two items is 0. Later on, it's divided into all three items equally because each of them has flex-grow: 1, making them 200px, 50px, and 50px respectively.

Example 2:

• In the above code, the flex items have flex-grow: 1 for equal distribution of space but don't have flex-basis and therein lies the point. When you miss to assign a specific flex-basis value to your flex items, its default value becomes auto and the width distribution will be done according to the content size.

• To fix this issue, also add flex-basis: 0. Flex basis will ensure that there is no default distribution of width and the entirety of it then will be distributed equally among the items because of flex-grow: 1.

If you want to understand these properties in much more detail, check out this guide by CSS Tricks.

4. Are media queries overriding some of your desired properties?

If you are building a UI where certain elements are to be same irrespective of the device and screen, make sure that media queries are not overriding those default properties that need to work on each screen.

In the above example, the property flex: 0 0 100%; was overridden by flex: 0 0 calc(50% - 1rem); in the media query and therefore the user was not getting the desired output in the UI.

5. Automatic minimum size of Flex items

All flex items have an automatic minimum size min-width: auto or min-height: auto on the main axis to avoid shrinking past its content. Remember that it works only for the main axis, so if the flex-direction is row, only min-width will become auto and if the flex-direction is column, then only the min-height become auto.

Minimum width or height when set to auto allows flex items to change their size to accommodate the content properly. You can, however, override this default behavior by setting min-width: 0 in row-direction and min-height: 0 in column-direction.

Here's an example of this issue-

Note: In case you want to convert your email templates to HTML code, check out Kombai For Email.

6. If you are using justify-content, remember that default width is auto:

One important thing to keep in mind is that if you are not explicitly giving a fixed width to an element, then the default width is auto.

An element with the width:auto will take up the smallest needed space for the content and will shrink or expand accordingly to fit its content.

In such cases, justify-content will not work as intended because all the available space has already been covered by the content itself and there is no extra space for justify-content to align the flex items. This problem can be solved by giving a fixed width to the element.

7. If your issue is happening in some specific browsers/ devices

Sometimes, the code you write is correct but it doesn't conform to the ways flex used to work earlier. As a result, it doesn't work as intended on some old browser versions.

In the above example, the flex layout is not working on some iPads. This is because it is missing the -webkit- syntax that must be used for iPads that have Safari version 6.1 or less.

Here are a few tools and guides that will help you identify and solve cross-browser compatibility issues-

• Autoprefixer CSS online- Autoprefixer is a tool that automatically adds vendor prefixes to your CSS code. Vendor prefixes are extra code added to CSS properties to ensure they work correctly on different browsers. For example: -webkit-, -ms-, and -moz-.

• Can I use- This tool shows up-to date browser support tables for various web technologies, including CSS Flexbox.

• Backwards compatibility of flexbox- A guide by MDN that tells about the history of flexbox and how to write to code that is backwards compatible with the older versions of the browsers.

• Flexbugs- A GitHub repository that contains lots of flexbox issues, particularly dealing with cross-browser compatibility problems.

Wrapping Up

Though the article has come to an end, the bugs are still alive. We have covered some of the common flexbox issues developers face and hope this will help you figure out solutions for your codebase.

Let us know in the comments if you find this blog post helpful and whether or not it has helped you solve your flexbox related issues.

Happy Coding!