I need to display several boxes next to each other. Each box has a variable number of child items. The parent should expand according to the space that the child items are taking up. It is important that the items have fixed width. I'm using flexbox for layout. It should look like this:
I wrote a Plunkr to illustrate.
The problem: Chrome does not expand the parent when the children take up more space. The child items are displayed beyond the parents' boundaries and appear in a neighbouring parent, resulting in this mess:
Ironically, if you open the Plunkr in IE 11 or Edge, it works fine.
What am I doing wrong?
Here's a code snippet:
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>