philipwalton/flexbugs

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

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

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

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

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

USE CASE 2

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

USE CASE 3

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

Tech stack

CSSHTML

Getting it running

Difficulty · easy Time to first run · 5min

No installation, documentation and demo pages only.

In plain English

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.

Copy-paste 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?

Open on GitHub → Explain another repo

← philipwalton on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.