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

我不希望细胞生长或收缩,它们应该总是400px宽.父进程应该增长并溢出窗口,并且预计会出现水平滚动条.

在上面的示例中,红色边框应位于绿色边框周围.绿色边框具有预期尺寸,而不是红色边框.

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

我对非flexbox解决方案持开放态度(参见内联块尝试),但会更喜欢一个flexbox(因为我需要align-items: center行上的行为)

Answer 1

如果您希望容器始终与其子容器的宽度相匹配,则需要进行调查display: inline-flex.

display: flex 表现得更像宽度为100%的容器

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