Is there any use for flex-shrink when flex-wrap is wrap?

Question

I don't think flex-shrink and flex-wrap:wrap; make sense together but I wonder if there is something I'm missing.

.container{
  background: #DDD;
  width: 300px;
  height: 100px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap
}
.tags{
  background: orange;
  box-sizing: border-box;
  flex: 1 3 200px;
}
.redes{
  background: cyan;
  box-sizing: border-box;
  flex: 0 1 200px;
}
.wrap{
  flex-wrap: wrap;  
}

<div class="container">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>
<div class="container wrap">
  <div class="tags">box1</div>
  <div class="redes">box2</div>
</div>

I understand that when, flex-wrap is set to nowrap, the negative space gets distributed using the values on flex-shrink. Meanwhile, if flex-wrap is set to wrap, there can't be any negative space, can it? Therefor this property is just useless, or at least I can see any effect. Is this right?

My point is: when `flex-wrap` is `wrap`, does different flex-shrink values have any effect at all? — Vandervals, Apr 26 '16 at 14:45
Yes, but that's too broad a question. Each situation will be different dependant on the structure etc. Hey, if you don't want to use it, don't, just use the default option and wait. Maybe you'll never need it....who knows. — Paulie_D, Apr 26 '16 at 14:48
Can you show a situation in which it has any effect? because I can't imagine any — Vandervals, Apr 26 '16 at 14:49
Recall that flex-shrink allows flex items to shrink to prevent overflow. In what situations can overflow occur? — BoltClock, Apr 26 '16 at 14:56
Sure...here - http://codepen.io/Paulie-D/pen/aNaGpG Flexshink is needed to restrict the width of the first div. — Paulie_D, Apr 26 '16 at 14:56
@Paulie_D, not true, using flex-basis only will have the same effect: http://codepen.io/vandervals/pen/MyqGrE — Vandervals, Apr 26 '16 at 15:11
No...`flex-basis /= width. It's the ***initial** width before flex-grow/flex-basis are taken into account. — Paulie_D, Apr 26 '16 at 15:13
@Paulie_D, I'm not sure if I follow you, but despite being 2 different rules with different behaviours, in the example, adding flex-basis: 150px and removing flex-shrink, will make the first element remain 150px wide... — Vandervals, Apr 26 '16 at 15:17

zzzzBov · Accepted Answer · 2016-04-26T16:16:41.767

15

Meanwhile, if flex-wrap is set to wrap, there can't be any negative space, can it?

If an element is wider than the flex container, it can't wrap across multiple lines, but it can shrink.

Therefor this property is just useless, or at least I can see any effect. Is this right?

Nope, you'll see the effect when a flex item would otherwise overflow its parent container.

.box {
  background-color: pink;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wide {
  background-color: lightgreen;
  flex: 0 0 auto;
  margin: 10px 0;
  width: 150%;
}

.shrink {
  background-color: lightblue;
  flex-shrink: 1;
}

<div class="box">
  <div class="wide shrink">
    Wide, shrinks
  </div>
  <div class="wide">
    Wide, won't shrink
  </div>
</div>

edited Apr 26 '16 at 16:16

answered Apr 26 '16 at 14:54

zzzzBov

174,988
54
320
367

*If an element is wider than the flex container, it can't wrap, but it can shrink.* Well, obviously, items that are wider than the flex container *can* wrap and *can* shrink. Expanding on your answer a bit: https://jsfiddle.net/yh2sgwjy/3/ ... Still, you highlighted the exception to the OP's theory, so you have my +1 :-) – Michael Benjamin Apr 26 '16 at 15:39
@Michael_B, what i meant by "can't wrap" was that the element itself can't split across lines. I'll have to update the wording in my answer to make that more clear. – zzzzBov Apr 26 '16 at 16:15
So it *is* useless if you're expecting a two column layout to balance itself based on flex-shrink. – Simon_Weaver Jul 23 '18 at 22:18
1

I guess you can think of it as 'wrap takes priority over shrink'. I don't see this formally written anywhere. – Simon_Weaver Jul 23 '18 at 22:18

Is there any use for flex-shrink when flex-wrap is wrap?

1 Answers1

Linked