【发布时间】：2016-03-17 12:29:33
【问题描述】：
我有一个 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，如果你看这个，我已经设置了边框以显示所有内容。我已经通读了答案，看看我是否可以根据我的情况调整它们，但我不太明白。如果这个小提琴已经得到回答，我深表歉意。
【问题讨论】：
-
检查浏览器对
content值的支持。 -
根据mdn 没有浏览器支持内容。还有其他方法吗？
-
可能是当前的浏览器无法处理我的要求 - 在这种情况下，我可以使用额外的包装元素吗？
-
经过大量努力，我相信当前的 css/浏览器无法做到这一点
-
解决方案 不是问题的答案，但我的解决方案是允许 flex 调整子元素的大小，然后调整父元素的大小以匹配每次绘制。显然，布局引擎会更好地处理这件事（可能快一个数量级），但由于我的代码没有动画，所以我可以摆脱它。