Chrome不会根据孩子的内容展开flex父级

Question

我需要在彼此旁边显示几个方框.每个框都有可变数量的子项.父母应根据子项目占用的空间进行扩展.物品的宽度固定很重要.我正在使用flexbox进行布局.它应该如下所示:

我写了一篇Plunkr来说明.

问题:当孩子占用更多空间时,Chrome不会扩展父级.子项目显示在父母的边界之外并出现在邻近的父级中,导致这种混乱:

具有讽刺意味的是,如果你在IE 11或Edge中打开Plunkr,它运行正常.

我究竟做错了什么？

这是一段代码片段:

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.items {
  display: flex;
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 4</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 5</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 6</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>

Answer 1

这似乎是Chrome中的一个错误.

在这段代码中:

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

... Chrome不符合固定的25px宽度.或者,至少,容器没有识别空间.在考虑所有项目计算之前,看起来容器的大小.

简单的解决方法是使用width而不是flex-basis.

.items span {
    flex-shrink: 0;
    width: 25px;
 }

修订演示

UPDATE

错误报告

在调整嵌套的flex容器大小时,将忽略Flex-basis.

"是的,这是我们遇到的一个错误的结果,也许是一个不幸的规范后果......"

"当外部flexbox找到所需的内部flexbox大小时,它会询问其最大内容大小(请参阅LayoutFlexibleBox :: computeInnerFlexBaseSizeForChild).但是这里是bug的来源,最大内容大小没有考虑flex-basis在内,只有width属性/实际内容.这就是为什么添加一个显式宽度来修复bug."