html - flexbox 如何在溢出时扩展到它的 child ？

Question

我有一个 flexbox 布局。

html如下:

<div class="grid">
  <div class="row">
    <div class="column">Content</div>
    <div class="column">Content2</div>
    <div class="column">Content2</div>
  </div>
  <div class="row">
    <div class="column">Content</div>
    <div class="column">Content2</div>
    <div class="column">Content2</div>
  </div>
</div>

和CSS:

.grid {
  overflow: auto;
  width: 500px;
  height: 400px;
  background-color: #eee;

  display: flex;
  flex-direction: column;
}

.row {
  background-color: #ddd;
  align-items: stretch;
  display: flex;
  border: 2px solid black;
}

.column {
  flex: 1 0 20em;
  padding: 0.2em;
  border: 2px solid lightblue;
  /*background-color: hsla(0, 100%, 80%, 50%);*/
}

(参见 https://jsfiddle.net/bz71qptu/1/)

在前面的代码中，.box 元素不会扩展到其子元素的宽度。我如何让它这样做？

编辑

我已经在 jsfiddle 中添加了一个我希望在视觉上实现的示例

编辑2

我需要稍微更改问题以适应我的特定问题。父元素与 flex-direction: column 对齐，这意味着使用 min-width 似乎不起作用。如果没有这个，min-width 解决方案将是完美的。

编辑3

我非常感谢大家的帮助，但我不确定我是否在我的示例中准确地捕捉到了我想要的行为，即使我得到了所有的建议，我似乎也无法捕捉到让它做我想做的事。这是一个更好的 jsfiddle ，如果你看这个，我已经设置了边框以显示所有内容的位置。我已经通读了答案，看看是否可以根据我的情况调整它们，但我不太明白。如果这个 fiddle 已经得到解答，我深表歉意。

Answer 1

修改后的答案

您修改后的问题将 flex-direction 从 row 更改为 column。

通过此调整，应用于 .box 的 flex 属性不再与您的目的相关，因为它现在处理垂直大小。换句话说，对于 column，flex 属性控制高度而不是宽度。

然而，正如我在评论中提到的，将 overflow: auto 添加到 .box 似乎可以完美地工作(在 Chrome、FF 和 IE11 中测试)。

DEMO

您在评论中提到它破坏了布局引擎。布局对我来说是坏的，在 jsFiddle 中也是如此。只需再次点击 [运行]。

自从几天/几周(？)前 jsFiddle 启动他们的升级以来，它一直引起一些困惑，因为它现在缓存代码。您可能需要清除 jsFiddle cookie(在浏览器中转到 chrome://settings/cookies)或在加载后再次运行修改后的代码。

---

原始答案

flex-basis 值不是content，而是尝试auto 或0。

The content value isn't supported yet.

事实上，也许简单的 flex: 1 就可以为您工作。

看这里:

• CSS-Tricks ~ Common Values for flex
• W3C Flexbox Spec ~ Common Values for flex