<分区>
我需要并排显示多个框。每个盒子都有数量可变的子项。父项应根据子项占用的空间进行扩展。元素具有固定宽度很重要。我正在使用 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>