Flexbox 行：不根据内容增长？ [复制]

Question

我有以下结构，我想了解为什么我的行不随其内部内容增长。

.row {
  border:solid red;
  display: flex;
  flex-direction: row;
}


.cell {
  border: solid green;
  flex: 0 0 400px;
}

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

JsFiddle

我不希望单元格增长或缩小，它们应该始终为 400 像素宽度。父级应该增长并溢出窗口，并且需要一个水平滚动条。

在上面的例子中，红色边框应该在绿色边框周围。绿色边框具有预期尺寸，而不是红色边框。

出于与我的用例相关的可维护性原因，我不想为我的行设置静态宽度。

我对非 flexbox 解决方案持开放态度（请参阅 inline-block attempt），但更希望使用 flexbox 解决方案（因为我需要 align-items: center 行为）

Answer 1

如果您希望您的容器始终与其子容器的宽度相匹配，您需要查看display: inline-flex。

display: flex 的行为更像是一个宽度为 100% 的容器

这是一个应该工作的小提琴： http://jsfiddle.net/hnrs64fm/