0

i read mdn and googled other docs. i understand that flex-basis is higher priority than width, and than content computed width.

but seems the above only applies when flex-basis is >= content min width. specifically (note i used "width", not "min-width"),

  • if i set flex-basis = 0, the div element width wouldn't become 0 (seems it's min content width). and you can change flex-basis to other small value like 2px, the final width is still min content width.: https://jsfiddle.net/afx3e14m/
    <div class='a'>
    <div class='b'>
    this is just a random statment
    </div>
    </div>

.a{display: flex;}
.b {flex: 0 0 0; 
border: 1px solid red;}

.a{display: flex;}
.b {flex: 0 0 auto;
width:0;
border: 1px solid red;}

moreover, if you apply flex-basis and width at the same time, with width smaller than flex-basis, then flex-basis will take effect even though it's smaller than min content width: https://jsfiddle.net/afx3e14m/2/

.a{display: flex;}
.b {flex: 0 0 2px;
width:0px;
border: 1px solid red;}

so this is really confusing. seems it's not as simple as "flex-basis takes priority, and then fall back to width if not specified". it's more like, when flex-basis is wider than min content width, this is true. but when narrower, whether flex-basis would be effective depends on the existence of a smaller width. if width is larger than flex-basis and smaller than min content width, then width will be applied instead of flex-basis.

i was wondering if any developer can confirm this or point me to some really good documentations/tutorials. things like MDN are good, but couldn't find the comprehensive logic about flex-basis there. thanks.

user3236895
  • 1,415
  • 2
  • 12
  • 13
  • @LGSon please read the question thoroughly before marking things as duplicate. none of the issue mentioned in this question is addressed in the alternative link – user3236895 Mar 07 '19 at 22:19
  • I now downvoted as you added noise like _"don't mark questions as duplicates simply because they have similar titles"_. Anything but what explain why a dupe is not a dupe should go into a comment. If you edit that, let me know and I remove it again. (and note, more or less no one close as a dupe only based on a title, and if a mistake were made, an inline explanation + comment is enough to bring that to our attention). – Asons Mar 08 '19 at 05:06
  • I added one more dupe link, and now those 2 should be clearing things for you. – Asons Mar 08 '19 at 05:06
  • cool. removed those notes in the question. i added them since the yellow banner above the comment area says "please edit the question to explain how it is different" – user3236895 Mar 08 '19 at 05:43
  • for your 2nd link. thanks a lot. it's relevant and i basically figured it out via testing. but it's still different. as the 2nd link is about "min-width", which is clearly the highest priority compared to width, flex-basis, and computed content width. but for the questions i wrote, setting "width" property seems to override flex-basis when it is smaller than min content width. unless "width" in this situation can be used interchangeably with "min-width", it doesn't seem to be very logical – user3236895 Mar 08 '19 at 05:47
  • Simply put, _flex-basis_ is a start value for a flex row item's width, whereas _width_ is not. Also, _width_ is not a Flexbox property, and when used one kind of make it behave as a normal element instead of a flex child. The _min-width_ (for flex row children), which defaults to `auto`, prevent it to be smaller than its content, which is what make it different from other display types, just like e.g. a table cell, which also won't shrink beyond content size. – Asons Mar 08 '19 at 07:08
  • agree with everything you said. but again, the property in my code pasted is width, not min-width. in terms of priority: min/max-width > flexbasis > width >content but code shows in some cases, seems width > flex basis, this is what the question is about – user3236895 Mar 08 '19 at 18:03
  • thoughts on the "width" part? as i said, the link you shared is about "min-width", so the duplicate mark should be removed. @LGSon – user3236895 Mar 13 '19 at 21:46
  • The two dupes together explain different parts of your question. If you run your code samples in Firefox you'll see a different behavior than in e.g. Chrome, which simply will make you even more confused. Again, simply put, there is the specs and the reality, were different browsers makers either interpret the specs different, which itself depends on _when_ they did that given that the specs. change by time, and there is bugs, where some property combinations render something it weren't suppose to. – Asons Mar 14 '19 at 03:10
  • Here is another article trying to explain their difference: https://gedd.ski/post/the-difference-between-width-and-flex-basis/ – Asons Mar 14 '19 at 03:11

0 Answers0