question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug 4: Why flex basis of 0% instead of auto?

See original GitHub issue

When not explicitly set, flex-basis is auto, according to MDN. So you’d expect

flex: 1;

to be rewritten to

flex: 1 1 auto;

But the plugin uses 0% instead of auto, which yields different results. At least in IE10, a flex-basis of 0% will prevent the element from growing.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
RoelNcommented, Jan 12, 2017

Ah yes, you are right. Upon closer inspection, it indeed said so in the page I linked:

Defaults to 0% when omitted.

0reactions
adrienharnaycommented, Sep 22, 2017

Nevermind, I just realized that is is a manifestation of Bug #7 😦

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS flex-basis: 0% has different behaviour to flex-basis: 0px
The issue is related to the usage of percentage. Using 0 or 0px is trivial since you will set the initial height to...
Read more >
Why No flex-basis or "0" flex-basis still break the line when ...
The initial value for flex-basis is actually auto , not 0 , so if you don't set the flex-basis and only use flex-grow...
Read more >
flex-basis - CSS: Cascading Style Sheets - MDN Web Docs
Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword.
Read more >
Firefox 36 flex-basis 0% in sized container #25 - GitHub
In Firefox, the height of wrapper overflow: auto; element grows to the height of its content when the basis uses 0% instead of...
Read more >
The thing people get wrong about flex-basis - YouTube
Dive even deeper with my 4 -hour long flexbox course: https://flexboxsimplified.comFlex- basis is one of those things that people sort of, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found