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

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:

CodePen Embed - flex properties 1

<h1>The flex-grow Property</h1>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
</div>

#main {
  width: 300px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {
  flex-grow: 1;
  flex-basis: 50%;
}

#main div:nth-of-type(2) {
  flex-grow: 1;
  flex-basis: 0;
}

#main div:nth-of-type(3) {
  flex-grow: 1;
  flex-basis: 0;
}

Run Pen

Example 2:

CodePen Embed - flex properties 2

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

Run Pen

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-

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

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.

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

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.

Happy Coding!