Whats is the difference between flex-basis: auto and flex-basis: content?

user_3429430 0
Viewed 1062

I have been reading MDN article on flex-basis css property. There I don't see any definition of flex-basis: auto. It explains about flex-basis: content. Seems like content has now replaced auto. But if that's the case, then why is auto still the initial value?

flexbox css html
1 Answers

The MDN article seems to have been updated since this question was originally asked. In short:

  • auto means "look at my width or height property".
  • content means "look at my content".

This does result in slight differences when the element has a fixed width or height. You will notice this difference if you view this live demo ONLY in Firefox (The value content is ONLY supported in Firefox at the time of this writing).

Also to quote historical notes from the same MDN article:

  • Originally, flex-basis:auto meant "look at my width or height property".
  • 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. It was implemented in bug 1032922.
  • Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).
user_53532860
Related