我需要将几个盒子并排显示。每个盒子都有不同数量的子项。父元素应根据子项占用的空间进行扩展。子项必须具有固定宽度。我正在使用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>