I was testing this relation and i found it was not consistent, at least from my current point of view. For example, the behavior of the following snippet:
<style>
body {
padding: 0px;
margin: 0px;
}
#main {
width: 350px;
height: 100px;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 23%;
}
#main div:nth-of-type(2) {
flex-shrink: 3;
}
</style>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
Differs from this other in a non consistent way if we change the shrink value:
#main div:nth-of-type(2) {
flex-shrink: 2;
}
That is, it lacks one more pixel (i guess). And if we put a bigger number instead, like 7 or 6, the result would be even more different, missing up to 3 pixels. I began testing because I noticed that when you shrink the flex container, the flex items would be responsive but to the naked eye, the disparity was evident. When you do some 'measuremts', things are indeed not so neat as you would expect.
