为什么弹性物料比容器宽？

Question

使用flexbox时，有时，如下面的示例所示，当视口的宽度不足以容纳内容时，flexbox项的宽度将比容器大。

• 何时何地发生这种情况？

• 如何限制物品的宽度永远不能超过容器？

代码：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.item-1 {
  flex: 1 1;
  background-color: yellow;
}

.item-2 {
  flex: 1 0 100%;
  background-color: green;
}

<div class="container">
  <div class="item item-1">
    item1item11item111item1111item11111item111111item1111111item11111111item111111111item1111111111

</div>
  <div class="item item-2">
    item2item22item222item2222item22222item222222item2222222
  </div>
</div>

这是一支电笔：

https://codepen.io/anon/pen/MqdaoB

Answer 1

尝试在字符之间留出一些间隔，或将word-break赋予.item

.item {
  word-break: break-word;
}

https://codepen.io/anon/pen/YObyjq