Flex忽略100％宽度

Question

为什么flex会忽略某些项目上设置的宽度，但是要遵守其他项目设置的宽度？

我想将flex用于网格系统，有时我想要宽度为100％的项目。

Codepen

在这个链接的例子中，我希望项目遵循它们给出的宽度。 .full在屏幕上的宽度应为100％，而.one-third和.two-thirds应遵循各自的宽度33.3％和66.6％

但相反，一切都挤在一条线上。

.grid.full {
  width: 100%;
}

.grid.one-third {
  width: 33.33%;
}

.grid.two-thirds {
  width: 66.66%;
}