34

What is the difference between these two values? I've tested numerous examples and they just give the exact same result... Can someone please give me an example where flex-basis: auto; does not give the same result as flex-basis: 0;

Oti Na Nai
  • 1,227
  • 4
  • 13
  • 18
  • 10
    @Michael_B: with respect, this question has not been asked before. The question you referred to is a different question. While one of the answers does mention these values for `flex-basis`, that is _not_ the focus of that question. When looking for exactly the same information, I am drawn to _this_ question, not the other. – Manngo Apr 08 '18 at 23:26
  • 6
    @Michael_B yes, but you find the answer via the question, as I did. The comment _This question has been asked before and already has an answer_ is misleading. – Manngo Apr 08 '18 at 23:35
  • @Michael_B I don’t have the reputation points to vote for reopening the question, so I’ll have to say out of it :( – Manngo Apr 08 '18 at 23:41
  • 2
    Good lord, Michael_B, you actually edited the title of the other question to make it look more like a duplicate of this one? I'm rolling that back, the title you gave it is not relevant to that question. – Daniel Beck Aug 01 '18 at 18:45

1 Answers1

44

"0" and "auto" flex-basis will be different in most if not all situations: numeric values are interpreted as specific widths, so zero would be the same as specifying "width: 0" -- and thus will collapse the element to its smallest possible width given the content, or to zero itself if its overflow is hidden or the element is directly sizable (an image for example.)

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>
Daniel Beck
  • 18,929
  • 5
  • 34
  • 51