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，如果你看一下这个，我就把边界放在一边，以显示一切都在哪里。我已经阅读了答案，看看我是否可以根据自己的情况调整它们，但我无法理解。如果这个小提琴已经回答，我道歉。

Answer 1

修订答案

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

通过此调整，应用于flex的{{1}}属性不再适用于您的目的，因为它现在可以处理垂直大小调整。换句话说，使用.box column属性控制高度而不是宽度。

正如我在评论中提到的，将flex添加到overflow: auto似乎完美无缺（在Chrome，FF和IE11中测试过）。

DEMO

您在评论中提到它打破了布局引擎。布局对我来说也是如此，在jsFiddle也是如此。只需再次按[RUN]即可。

自从jsFiddle在几天/几周（？）之前推出升级以来，它已经引起了一些混乱，因为它现在缓存了代码。您可能需要清除jsFiddle cookie（在浏览器中转到 chrome：// settings / cookies ）或在加载后再次运行修订后的代码。

Original Answser

取代.box代替content，尝试flex-basis或auto。

The content value isn't supported yet.

事实上，简单0可能适合你。

见这里：

Answer 2

类.box是一个flexbox容器和一个类的flexed子级 .container

display: flex使其充当弹性箱容器

flex: 1 0 auto定义了它作为一个孩子（.container）
的行为方式

班级.element是班级.box
的受影响儿童

display: flex使.element充当Flexbox容器并且对您的fidde没有影响（仅当.element有子女时）

flex: 1 0 auto定义了它作为一个孩子（.box）
的行为方式
由于您尚未定义任何尺寸，但1000em为.element，overflow: auto为.container和flex-shrink: 0（flex: 1 0 auto）对于课程.box和.element，所有元素都会对定义的1000em作出反应，并且只能增长到1000em。

将flex: 1 0 auto更改为flex: 1（默认为flex: 1 1 auto），您的问题已得到解答！

微小更新：.element更改为flex: 1; min-width: 1000em

Fiddle

Flexbox如何在溢出时扩展到它的孩子？

修改

编辑2

编辑3

2 个答案: