显示Flex子级的行为就像具有内联块属性

Question

使用flex时出现奇怪的行为。

当我使用display: flex,时，它的子项看起来像具有display: inline-block属性。

flex容器的子级似乎扩展其宽度以适合其子项的内容...

Here is the codePen

如何使用flex避免这种“内联块行为”？

谢谢！