gitwtfhub

wtf is flexbugs?

philipwalton/flexbugs — explained in plain English

Analysis updated 2026-06-24

13,562Audience · developerComplexity · 1/5Setup · easy

TL;DR

Flexbugs is a community reference listing 17 confirmed CSS flexbox browser bugs with plain-English explanations, workarounds, and live demos, a go-to resource for anyone who must support older browsers.

Mindmap

mindmap
  root((repo))
    What it does
      Document CSS bugs
      Provide workarounds
      Link to live demos
    Coverage
      17 flexbox bugs
      Affected browsers
      Bug tracker links
    Use cases
      Debug layout issues
      Support old browsers
      Historical reference
    Audience
      Frontend developers
      CSS engineers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Look up a specific flexbox layout problem to find out if it is a documented browser bug and get the fix.

REASON 2

Check which browsers are affected by min-height or flex-basis bugs before writing a CSS workaround.

REASON 3

Compare broken and fixed behavior side by side using the live demo pages to confirm a bug in a browser you support.

What's in the stack?

CSSHTML

How it stacks up

philipwalton/flexbugspostmanlabs/httpbindivamgupta/diffusionbee-stable-diffusion-ui
Stars13,56213,56213,559
LanguagePythonJavaScript
Setup difficultyeasyeasyeasy
Complexity1/52/51/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

No installation, documentation and demo pages only.

Wtf does this do

Flexbugs is a community-maintained collection documenting bugs in CSS flexbox and the workarounds available for each one. Flexbox is a CSS technique for arranging elements on a webpage in rows or columns, controlling spacing, alignment, and sizing. However, different web browsers implemented flexbox in slightly different ways, and some browsers had outright bugs where the layout did not behave as the specification required. The repository lists 17 confirmed bugs, each with a description of what the bug is, which browsers are affected, links to live demo pages showing both the broken behavior and the working workaround, and links to the official browser bug tracking tickets where available. Examples include flex items shrinking smaller than they should, min-height on a flex container not affecting its child elements in Internet Explorer, flex-basis ignoring box-sizing calculations, flex-basis not supporting calc() expressions, and certain HTML elements like fieldset and button not being valid flex containers. Each bug entry is numbered and the associated demo pages let you observe the broken and fixed states side by side in your current browser. Most entries also include a plain-English explanation of why the bug occurs and what the workaround does to correct the visual result without altering the intended design. The README notes that this repository is no longer maintained, because most of the listed bugs have since been fixed in modern browsers. It remains a useful historical reference for anyone who needs to support older browser versions or who encounters an unexpected layout problem that may trace back to one of these documented quirks. The project itself contains no installable code. It is a documentation resource consisting of the README and linked demo files. The full README is longer than what was shown.

Yoink these prompts

Prompt 1
I am using CSS flexbox and my flex items are shrinking smaller than their content in Internet Explorer, is this in Flexbugs and what is the workaround?
Prompt 2
Using the Flexbugs reference, help me write a CSS fix for flex-basis ignoring box-sizing on IE 10 and 11.
Prompt 3
My min-height on a flex container is not affecting its children in older browsers, show me the Flexbugs entry for this and how to fix it.
Prompt 4
Which Flexbugs entries affect Safari and how do I write workarounds that do not break modern Chrome or Firefox?

Frequently asked questions

wtf is flexbugs?

Flexbugs is a community reference listing 17 confirmed CSS flexbox browser bugs with plain-English explanations, workarounds, and live demos, a go-to resource for anyone who must support older browsers.

How hard is flexbugs to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is flexbugs for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.