css - 以百分比表示的 flex-basis 值如何工作？

Question

当我将百分比值赋予 flex-basis 时，该百分比是多少？父容器？我在几个超过 100% 的弹性项目上定义了弹性基础，但我的所有项目都正确显示。有人可以解释如何考虑弹性基础吗？我正在玩的 codepen 位于：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%;
}

标签： cssflexbox