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>
Getting the child of a flex-item to fill height 100% Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
The display property is not inherited, so display: flex is not either.
The flexbox code is triggered on the parent element, but affects all of the child elements.
This appears to be a bug in Chrome.
In this section of code:
.items span {
flex-basis: 25px;
flex-shrink: 0;
}
... Chrome is not respecting the fixed 25px width. Or, at least, the container is not recognizing the space. It looks like the container is being sized before all item calculations are factored in.
The simple workaround is to use width
instead of flex-basis
.
.items span {
flex-shrink: 0;
width: 25px;
}
revised demo
UPDATE
Bug Report
Flex-basis is being ignored when sizing nested flex containers.
"Yeah this is kind of a sucky consequence of a bug we have, perhaps combined with an unfortunate spec consequence..."
"When the outer flexbox finds the desired size of the inner flexbox, it asks for its max-content size (see LayoutFlexibleBox::computeInnerFlexBaseSizeForChild). But here's where the bug comes in, the max-content size does not take
flex-basis
into account, only width properties/actual content. That's why adding an explicit width fixes the bug."
Try adding inline-flex
instead of flex
, also commented out some unwanted flex stylings please refer here,
/* Styles go here */
body {
/* display: flex; */
overflow: scroll;
}
.parent {
border: 1px solid grey;
padding: 0 20px;
display: inline-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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With