Size of Parent Increase on adding width to flex items

Question

 /* Centering Gray Box Absolutely */.gray-box { background-color: gray; width: 500px; height: 500px; position: absolute; top: 50%; left: 50%; /*From the top left corner of the div*/ transform: translate(-50%, -50%); /*To make it from center*/ } /* Flex for gray box */.gray-box { display: flex; justify-content: space-around; } /* Defining the block sizes */.block { flex-grow: 1; /*Allow the boxes to take size of the parent*/ }.red { flex-grow: 2; /*Making the red box grow twice as others in the parent*/ } /* Adding WIte Boxes in Black block */.black { display: flex; flex-direction: column; /* align-items: center; */ justify-content: space-around; }.whitebox { background-color: white; flex-basis: 50px; /*Never use width when using flex box*/ /*Doesn't work for flex items*/ width: 50px; }

 <div class="gray-box"> <:-- Black block with 3 white boxes --> <div class="block black" style="background-color: black"> <div class="whitebox"></div> <div class="whitebox"></div> <div class="whitebox"></div> </div> <:-- Red Box with 3 White Rectangles --> <div class="block red" style="background-color: red"></div> <!-- Cyan Box with 3 White Circles --> <div class="block cyan" style="background-color: cyan"></div> </div>

As soon as I add width of 50px to the white box the size of black box increase and the layout doesn't go according to the flex grow? What should I do now ?

Added Width to a flex item but it break the flex grow:1; of the parent.

Answer 1

If I understand your problem correctly, your expectations on the behavior of 'flex-grow' are wrong. It does not fill the parent container based on this ratio, it only fills the available size of the parent container.

So if you put a 50px white box, the available space will be 100%-50px and the growing will then happen >> since black and blue boxes have the same grow factor they will grow for the same amount BUT the black box started from 50px while the blue box started at 0px.

To fix this you must explicitly say to the black box that its reference size should be 0px, which can be achieved using the flex-basis property.

 /* Centering Gray Box Absolutely */.gray-box { background-color: gray; width: 500px; height: 500px; position: absolute; top: 50%; left: 50%; /*From the top left corner of the div*/ transform: translate(-50%, -50%); /*To make it from center*/ } /* Flex for gray box */.gray-box { display: flex; justify-content: space-around; } /* Defining the block sizes */.block { flex-grow: 1; /*Allow the boxes to take size of the parent*/ }.red { flex-grow: 2; /*Making the red box grow twice as others in the parent*/ } /* Adding WIte Boxes in Black block */.black { flex-basis: 0; display: flex; flex-direction: column; /* align-items: center; */ justify-content: space-around; }.whitebox { background-color: white; flex-basis: 50px; /*Never use width when using flex box*/ /*Doesn't work for flex items*/ width: 50px; }

 <div class="gray-box"> <:-- Black block with 3 white boxes --> <div class="block black" style="background-color: black"> <div class="whitebox"></div> <div class="whitebox"></div> <div class="whitebox"></div> </div> <:-- Red Box with 3 White Rectangles --> <div class="block red" style="background-color: red"></div> <!-- Cyan Box with 3 White Circles --> <div class="block cyan" style="background-color: cyan"></div> </div>