0

When I give percentage value to flex-basis, what is that percentage of? The parent container? I defined flex-basis on a few flex-items that would exceed 100%, yet all of my items are displayed correctly. Could someone explain how to think about flex-basis? the codepen i was playing with is at: https://codepen.io/anon/pen/pXWQBN

  <div class="container">
  <div id="i1" class="items">item1</div>
  <div id="i2" class="items">this is item2</div>
  <div id="i3" class="items">this is third longest text</div>
  <div id="i4" class="items">this is longer than third longest item</div>
  <div id="i5" class="items">well, this is the item that contains larges amount of text</div>
</div>

.container {
  background: lightsalmon;
  width: 98%;
  padding: 15px;
  height: 200px; /**/
  display: flex;
  justify-content: space-between;
}

.items {
  background: lightyellow;
  margin:5px;
}

#i1 {
  flex-basis: 100%; /*100% of what?*/
}

#i2 {
  flex-basis: 25%; /*25% of what?*/
}

#i3 {
  flex-basis: 45%;
}
haku
  • 4,105
  • 7
  • 38
  • 63
  • *An absolute , a of the parent flex container's main size property, or the keyword auto. Negative values are invalid. Defaults to 0.* --> https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis. But flex-basis doesn't define the width, you need to also consider flex-shrink/flex-grow/min-width, etc – Temani Afif Jun 26 '19 at 23:41
  • Thanks Temani. But if it is of the parent container, then how come all my flex items are displayed even after I set flex-basis for a single item to be 100%? – haku Jun 26 '19 at 23:45
  • because `flex-shrink` is by default 1 so the basis is 100% (the starting point) and the final size will be less because the element will shrink – Temani Afif Jun 26 '19 at 23:46
  • 1
    here is an example of a detailed calculation so you understand better: https://stackoverflow.com/a/56581045/8620333 – Temani Afif Jun 26 '19 at 23:47

0 Answers0