0

One of the junior colleagues has been fiddling and ask for an explanation. I realize that while understanding the general issue, I can't explain why the specific behavior occurs.

As the fiddle shows, the orange parts are equally wide. But the class linky is set to flex: 1 1 0 which means that the contained items should grow and shrink as needed withing the container limits. I can't explain why the short one grows needlessly nor why the long ones don't make the green parent classed holder spread wider.

div.holder {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  border: 4px solid greenyellow;
}

div.linky {
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
  white-space: nowrap;
  border: 4px solid orange;
}

Finally, we want the orange ones to be just-enough-wide (wrt the text's length in each of them individually) while there's space in the green one. Otherwise, we want them to stop growing, hiding the overflowing content.

However, we're not looking for a fish but rather the rod here, so understanding the reason why the expected behavior didn't occur is the main point.

I've revised the CSS Tricks' on FlexBox and found extensive elaborations. Regrettably, I have to admit that I can't explain the fiddled behavior in our case. I've tried setting minimum width to 0 and auto, turning on/off display flex and numerous (all?) combinations of the grow/shrink parameter. No luck.

edit

Based on the helpful comments by @temaniafif I have created a new fiddle that performs better on excess of space but still doesn't shrink the elements despite them getting too wide.

My (obviously faulty) reasoning is like this. I want the holder to snatch all the positive space, shrink itself on negative space and have initial width based on its contents. So flex: 1 1 auto. I want the linky never to greed on excess of space, shrink itself when the space is limited and not to shrink itself to nothing (keeping it tight around itself). So flex: 0 1 auto.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • you need `min-width:0` on holder elements – Temani Afif Aug 26 '19 at 14:42
  • and you are setting `1 1 0` which means flex-basis:0 so basically the content doesn't matter and all the three element will grow/shrink the same way and will always be equal – Temani Afif Aug 26 '19 at 14:45
  • @TemaniAfif Interesting. According to what I got from the docs, the basis is about where the excessive space will be placed - within or between elements (according to [linked picture](https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg)). Perhaps I'm confused there... What value would you suggest? – Konrad Viltersten Aug 26 '19 at 14:52
  • not exactly like the, the basis is the initial width to consider before calculating the free space. If you set it to 0 then all the space will be free space .. In the figure, the brackets shows the free space and the growing, in the first one content play no role because basis is 0 and in the second we remove the content and the remaining is the free space ... so if you want the content to be considered, keep flex-basis as auto. – Temani Afif Aug 26 '19 at 15:03
  • basically each element will have `basis + free space` and the free space can be either negative (we have overflow) or positive then flex-grow/flex-shrink will defne how much free space each element will consume – Temani Afif Aug 26 '19 at 15:05
  • here is a good explanation of the whole algorithm: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax – Temani Afif Aug 26 '19 at 15:09
  • @TemaniAfif Damn me - I've been relying on CSS Tricks for such a long time I started calling **that** the docs, hehe. Great link you shared. I realize that I want 0 for grow (the items are as large as they are). I'm not sure about the shrink and basis though. Please check the edit to the question and a new fiddle. – Konrad Viltersten Aug 26 '19 at 16:09
  • you want this: https://jsfiddle.net/xumqtw4y/1/ ? – Temani Afif Aug 26 '19 at 18:29
  • @TemaniAfif In the long run, I wanted [this](https://jsfiddle.net/Chamster/hzqk3017/), which I finally crafted in the JsFiddle. But your link shows **precisely** what I was asking about at this stage. And your comments were crucial for my brains. Please post that as a short answer to be accepted. – Konrad Viltersten Aug 26 '19 at 21:07
  • I advise you then to answer your own question with what you understand and the final result you got. Like that you can also highlight your thinking in order to obtain the last fiddle. – Temani Afif Aug 26 '19 at 21:20

0 Answers0