0

In the following example, shouldn't the last column be 4 times wider than the other columns?

.container {
  display: flex;
  flex-direction: row;
  border: 3px solid #6874E8;
  padding: 10px;
}

.item {
  border: 1px solid #ccc;
  padding: 20px;
}

.item.last {
  flex-grow: 4;
}
<div class="container">
  <div class="item first">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item last">Item 6</div>
</div>

Isn't it that flex-grow means the last column can grow up to 4 columns? What determine the width of the last column in the above example? Why it isn't wider or smaller?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
user1941537
  • 6,097
  • 14
  • 52
  • 99
  • Because `flex-basis` is by default `auto`, and with that, it takes content into account before `flex-grow` split the rest of the space – Asons Apr 23 '19 at 09:29
  • Thanks, but I still don't get it. :-( – user1941537 Apr 29 '19 at 13:30
  • An `item` is first the size of its content, the text, and its border/padding/margin, and finally, what's left on that line (in this case) is shared based on the `flex-grow` on each `item`. In your case only the last `item` as it set, to `4`, though since no other has any, it takes it all. If one more `item` would have had it set, e.g. `1`, then the space left would be shared between those two, 1/5 and 4/5. – Asons Apr 29 '19 at 14:35

0 Answers0