css - flex 元素超出其容器

Question

我有一个定义了宽度的 flex 容器。容器有 flex-direction: row 和 2 列。一种是固定宽度，不灵活。另一个是灵活的，应该适合所有容器的剩余空间。

当灵活列内容足够长时，它会溢出容器，超出其宽度。

为什么会发生这种情况？我应该如何正确修复它？

注意:我已经通过使用 flex: 1 0 0 而不是 1 0 auto 解决了这个问题，它会很好。但我只是不明白为什么它停止超出父级 以及为什么它开始包装内容？这甚至是正确的方法吗？

HTML:

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
 </div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: green;
}

.flex-item {
  display: block;
  margin: 20px 0;
}

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

JSFiddle

Answer 1

为达到预期效果，还要为 .flexible 类指定宽度

.flexible { 
    flex: 1 0 auto; 
    width: 200px;
    background-color: blue; 
    word-wrap: break-word;
}

http://codepen.io/nagasai/pen/LkJzLz