CODEWITHSUNDEEP
cssflexbox
Vandervals
Vandervals

Reputation: 6064

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

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?

Upvotes: 14

Views: 5410

Answers (1)

zzzzBov
zzzzBov

Reputation: 179176

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>

Upvotes: 16

Related Questions