Same width containers with flex-grow not working

Question

I'm trying to use flex to create flex-items of same width, but they keep changing width depending on number of children in flex-item

fiddle

As you can see, the right green container is much smaller, even though both have flex-grow:1

How can I fix this? Thanks!

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

score 8 · Accepted Answer · answered Feb 26 '15 at 07:33

8

using flex:1 instead of flex-grow:1 seems to fix the issue.

answered Feb 26 '15 at 07:33

skyisred

6,855
6
37
54

score 4 · Answer 2 · answered Mar 04 '16 at 21:57

This is because flex-basis defaults to auto, which factors in the width of the element. To keep your elements the same with, you need to explicitly set flex-basis: 0:

.item {
  flex-basis: 0;
  flex-grow: 1;
}

See: https://jsfiddle.net/Wexcode/Lgqhcr07/

score 2 · Answer 3 · answered Feb 24 '15 at 05:15

2

if you don't specify a width to your flex-item (.item) they width is "auto" and they will adjust to its children element (in your case 'span').

Most implementation of flexboxes have 'width' specified for their items.

answered Feb 24 '15 at 05:15

ThiagoPXP

5,362
3
31
44

and also, specifying flex-basis – vals Feb 24 '15 at 16:57

score 0 · Answer 4 · answered Feb 24 '15 at 05:29

I think this should be the solution...

span {
    flex-grow: 1;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    display: inherit;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

<div class="container">
    <div class="item">
        <span></span>
        <span></span>
        <span></span>

    </div>
    <div class="item">
        <span></span>
    </div>
</div>

spans inside should be of specific width. When I remove flex-grow from spans, the problem comes back — skyisred, Feb 24 '15 at 06:35

Moto · Answer 5 · 2015-03-05T16:52:21.093

or use flex-basis: 100%; (you can remove flex-grow: 1;)

It's very well explained at http://www.w3.org/TR/css3-flexbox/#flex-basis:

flex-basis
This component, which takes the same values as the ‘width’ property, sets the ‘flex-basis’ longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. When omitted from the ‘flex’ shorthand, its specified value is 0%.

If the specified ‘flex-basis’ is ‘main-size’, the used flex basis is the computed value of the flex item’s main size property.

There's a diagram at the w3.org url above that makes it really easy to understand all of the above. Worth a look.

Please edit your answer, and explain why this solves the problem. — Ben, Mar 04 '15 at 16:18

Same width containers with flex-grow not working

5 Answers5