Flex 项目超出其容器

Question

我有一个定义了 width 的弹性容器。容器有 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

原文由 Unicorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要达到预期的结果，请同时指定 .flexible 类的宽度

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

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

原文由 Naga Sai A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 http://www.w3schools.com/cssref/css3_pr_flex-basis.asp 它说以下关于 flex-basis: auto ：

长度等于弹性项目的长度。如果项目没有指定长度，长度将根据其内容

flex-basis 是由 flex 属性简写设置的第三个属性。

因此，如果将其设置为 auto ，则 .flexible div 的最大宽度（取决于其内容）将是 display: flex 容器的宽度。

原文由 Simon Hänisch 发布，翻译遵循 CC BY-SA 3.0 许可协议