How do I fix flexbox items not shrinking properly in Chrome?

Check Flexbug #1, which addresses minimum content sizing issues in older Chrome versions (fixed in Chrome 72). The workaround involves setting flex-shrink to 0 and flex-basis to auto, with demos showing how to implement it.

Why is my flex container with min-height not working in IE 11?

This is Flexbug #3, where min-height on flex containers doesn't apply to items in IE 10-11. The workaround suggests using height instead or adding a wrapper flex container, as detailed in the demos.

Flexbugs vs caniuse: which is better for flexbox issues?

Flexbugs focuses on specific bugs and practical workarounds with code examples, while caniuse provides broader browser support tables. Use Flexbugs for debugging known inconsistencies and caniuse for general compatibility checks.

How to use Flexbugs to debug a layout that breaks in Safari?

Search the bug list for Safari-affected issues like Flexbug #11 (min/max size ignored when wrapping). Review the demos and apply the workaround, such as setting flex-basis to match min-width values.

Are flexbox bugs still a problem in modern browsers like Edge?

Most bugs documented in Flexbugs are fixed in modern browsers like Edge and recent Chrome/Firefox versions, but the repository is useful for legacy support or niche cases in older Safari releases.

What browsers does Flexbugs cover the most?

It heavily covers Internet Explorer 10-11 and older versions of Chrome, Safari, and Firefox, with detailed notes on when fixes were implemented, such as IE-specific issues with flex-basis and calc().

Open-Awesome

Flexbugs

MIT

A community-curated list of flexbox browser bugs and cross-browser workarounds for them.

GitHub

13.6k stars490 forks0 contributors

What is Flexbugs?

Flexbugs is a community-curated repository that documents known flexbox implementation bugs in various browsers and provides cross-browser workarounds. It helps developers diagnose and fix layout issues when using CSS flexbox, ensuring consistent rendering across different environments. The project includes detailed examples, affected browser versions, and practical CSS solutions for each bug.

Target Audience

Frontend developers and web designers who use CSS flexbox for layouts and need to support multiple browsers, especially older versions like Internet Explorer 10-11 or legacy Safari/Chrome releases.

Value Proposition

Developers choose Flexbugs because it centralizes hard-to-find flexbox quirks into a single, well-documented resource with proven workarounds, saving debugging time and reducing cross-browser inconsistencies. Its community-driven approach ensures solutions are tested and relevant.

Overview

A community-curated list of flexbox issues and cross-browser workarounds for them.

Use Cases

Best For

Troubleshooting flexbox layout issues in Internet Explorer 10-11
Fixing min-height and flex container sizing problems
Resolving flex-shrink and flex-basis bugs in older browsers
Handling flexbox bugs with inline elements or pseudo-elements
Ensuring consistent flex item alignment across browsers
Debugging flexbox animation or wrapping issues

Not Ideal For

Projects exclusively targeting modern browsers (e.g., Chrome 72+, Firefox 63+, Safari 10.1+) where most documented bugs are fixed
Developers seeking a comprehensive flexbox tutorial or learning resource from the ground up
Teams using CSS Grid as their primary layout method with only minimal flexbox usage
Applications with server-side rendering where CSS is pre-processed and browser inconsistencies are handled globally

Pros & Cons

Pros

Comprehensive Bug Catalog

Documents 17 specific flexbox bugs with clear descriptions, affected browsers, and tracking links, such as IE 10-11 issues with min-height and flex-basis, providing a centralized reference.

Practical Workarounds with Demos

Each bug includes tested CSS solutions and live HTML demos—for example, using max-width: 100% to fix overflow in IE—making it easy to implement fixes without guesswork.

Browser-Specific Tracking

Lists exact browser versions where bugs occur and links to official bug reports, helping developers understand the history and status of fixes across Chrome, Safari, Firefox, and IE.

Community-Driven Insights

Curated by contributors who updated the list as browsers evolved, ensuring workarounds are validated in real-world scenarios and reflect diverse use cases.

Cons

Unmaintained Repository

The README explicitly states the project is no longer maintained, so it won't be updated for new browser versions or emerging flexbox bugs, risking obsolescence.

Legacy Browser Focus

Most bugs are fixed in modern browsers (e.g., Chrome 72+, Safari 10), reducing relevance for contemporary projects that don't support older versions like IE 10-11.

Workaround Complexity

Some solutions require adding wrapper elements or specific CSS hacks like box-sizing adjustments, which can complicate code maintenance and increase CSS overhead.

Frequently Asked Questions

Related Projects

Flexbox layout

Flexbox for Android

Stars18,344

Forks1,803

Last commit2 years ago

Solved by flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Stars12,935

Forks992

Last commit3 years ago

FlexLayout for iOS

FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

Stars2,120

Forks237

Last commit4 months ago

grid-styled

This package has moved and renamed

Stars2,030

Forks94

Last commit6 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub