Flex-grow and flex-shrink question!

So here’s my CSS rules.
As you can see, I didn’t specified flex-grow for shrink-side and center, and even default value of it would be 0. However, when I change the screen size to be larger, shrink-side boxes actually stretched itself but stopped to grow at certain width (like you can see in the picture). Can you tell me why is that happen? Thank you :slight_smile:

body {
margin: 0;
border: 0;
font-family: ‘Roboto Mono’, monospace;
}

h1 {
text-align: center;
font-size: 18px;
}

h2 {
text-align: center;
font-size: 16px;
}

.grow,
.shrink {
width: 100px;
height: 100px;
background-color: Dodgerblue;
border: 2px solid lightgrey;
margin: 10px 30px;
}

.grow.side {
flex-basis: 60px;
flex-grow: 1;

}

.grow.center {
flex-grow: 3;

}

.shrink.side {
flex-basis: 300px;
flex-shrink: 3;

}

.shrink.center {
flex-shrink: 2;

}

#grows,
#shrinks {
display: flex;
background-color: Whitesmoke;
justify-content: center;
min-height: 200px;
align-items: center;
}

Hi @ye-wonl8998422915

I guess they stop growing when they are 300px wide, right? Then it would be due to the flex-basis.

I think so. Isn’t the flex-basis setting the width of item? Then why it limits the stretched width of it. I thought it would be done by max-width property.

The flex-basis property means that it is the preferred width which is tried to be achieved if possible. As you mentioned yourself, the flex-grow property’s default value is 0. max-width does a similar thing, but that will never be exceeded.

Oh okay. And last question, then what is the difference between flex-basis and the max-width?

Give your .shrink.side elements the attribute flex-grow: 2 and you’ll see that the elements become larger than 300px if the viewport has enough space for that. An element styled with max-width will never exceed the given value.

1 Like