0

My understanding about the flex-grow property is that the elements extend to take the space and this taken space is determined by the value of this property.

So if we have a flex container that has 3 child divs, the first one has flex-grow: 1, the second flex-grow:2, the third with flex-grow: 3, now we have 6 pieces so the third would take 50% of the space.

Why did adding a flex-grow value to the first div affect the third one?

.cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 700px;
  padding: 10px;
}

.cont>div {
  margin: 10px;
  background: lightgreen;
  border: 1px solid black;
  flex: 0 0 300px;
}

.cont>div:nth-last-of-type(1) {
  flex-grow: 5;
}

.cont>div:nth-of-type(2) {
  flex-grow: 1;
}

.cont>div:nth-of-type(3) {
  /* flex-grow:1; */
}
<div class="cont">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

https://jsfiddle.net/u4e2psh3/

When I added flex-grow: 5 to the first div i expected that it will take up the most of space of the parent container but I was confused when found that the third one was the one which was extended.

So why did the first one not extend but the third one did?

disinfor
  • 10,865
  • 2
  • 33
  • 44
Saher Elgendy
  • 1,519
  • 4
  • 16
  • 27

1 Answers1

1

The "first" div in the fiddle is being selected using "nth-last-of-type" rather than "nth-of-type", so the styles are being applied to the last div instead.

Cerden
  • 26
  • 2