CSS Flexbox Not Working? Common Causes and Fixes

Why is Flexbox Not Working?

Flexbox usually fails because display: flex is on the wrong element, the expected main and cross axes were confused, wrapping is disabled, or a child cannot shrink.

Inspect the parent in DevTools and enable the Flex overlay. Confirm display, flex-direction, justify-content, align-items, flex-wrap, container size, and child min-width.

For common responsive rows, use flex-wrap with a sensible flex-basis. Add min-width: 0 to children that contain long text so they can shrink inside the flex container.

CSS Flexbox is powerful but has several common pitfalls. When flexbox doesn't behave as expected, it's usually because the flex container isn't set up correctly, properties are applied to the wrong element, or there are conflicting styles overriding your flexbox rules.

Common Causes

Forgetting to add display: flex to the container
Applying flex properties to children instead of the container
Missing flex-wrap: wrap for wrapping items
Not setting a height on the container for vertical centering
Conflicting width/height on flex items

Quick Fix (TL;DR)

Immediate Fix: Flex on wrong element

/* ❌ Problem "" flex on wrong element */
.child { display: flex; justify-content: center; }

/* ✅ Solution "" flex on the container */
.container {
  display: flex;
  justify-content: center;  /* horizontal alignment */
  align-items: center;      /* vertical alignment */
  flex-wrap: wrap;          /* allow wrapping */
  gap: 16px;                /* spacing between items */
}

Common Scenarios & Solutions

Failure: No height nothing to center within

/* ❌ No height "" nothing to center within */
.container {
  display: flex;
  align-items: center; /* Has no effect without height! */
}

Correction: Full viewport height

/* ✅ Set a height for vertical centering to work */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;    /* Full viewport height */
  /* or */
  min-height: 300px;
}

Failure: Default is nowrap items overflow

/* ❌ Default is nowrap "" items overflow */
.container {
  display: flex;
  /* flex-wrap defaults to nowrap */
}
.item { width: 200px; } /* Items overflow on small screens */

Correction: Grow, shrink, basis

/* ✅ Enable wrapping */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  flex: 1 1 200px; /* grow, shrink, basis */
  /* Items wrap when they can't fit */
}

Failure: Flex-direction: column makes items full width

/* ❌ flex-direction: column makes items full width */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Needed to prevent full width! */
}
/* Items stretch to full width by default in column direction */

Correction: Centers items horizontally

/* ✅ Use align-items to control cross-axis sizing */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centers items horizontally */
  /* or */
  align-items: flex-start; /* Left-aligns items */
}

Correction: Needs at least 2 items to show space between

/* ✅ justify-content: space-between needs multiple items */
.container {
  display: flex;
  justify-content: space-between;
  /* Needs at least 2 items to show space between */
}

/* ✅ Use gap for consistent spacing */
.container {
  display: flex;
  gap: 16px; /* Modern, clean spacing */
}

Best Practices to Avoid This Error

Apply flex to the container, not children - display:flex goes on the parent
Set a height for vertical centering - align-items needs space to work in
Use flex-wrap: wrap for responsive layouts - Prevents overflow on small screens
Use gap instead of margins - Cleaner spacing without edge cases
Use browser DevTools - Inspect flex containers with the flexbox overlay
Use flex shorthand - flex: 1 1 auto is clearer than separate properties
Test in multiple browsers - Flexbox support varies slightly

Responsive Flex Row That Wraps

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
}

flex-wrap defaults to nowrap, which can cause overflow.
The basis gives each item a preferred width before wrapping.

Center Content on Both Axes

<style>
  .empty-state {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #94a3b8;
  }
</style>

<section class="empty-state">
  <p>No results found</p>
</section>

Vertical centering needs available cross-axis space.
When flex-direction is column, the meaning of the two alignment properties changes with the axes.

Before you move on