CODEWITHSUNDEEP
htmlcssflexbox
Arup Rakshit
Arup Rakshit

Reputation: 118289

how flex-basis: 0% and flex-grow factor calculates the computed width?

I have the below html, where I set default flex properties are being used. 

<div class="container">
  <div class="box"> BOX 1</div>
  <div class="box"> BOX 2</div>
  <div class="box box2"> BOX 3 .</div>
</div>

and styles are:

.container {
  border: 1px solid #59c;
  width: 60vw;
  background: #ccc;
  height: 200px;
  margin: 0 auto;
  display: flex;
  padding: 30px;
}

.box {
  font-size: 18px;
  font-weight: 800;
  background: #e5f;
  border: 1px solid #99c;
  padding: 20px;
}

Now, in my chrome browser I do see box 1 and box 2 has computed width of 94.52px, and box3 has 103.52px. The fiddle b666tkj9. Now when I do add below style:

.box2 {
   flex: 2 1;
}

and flex: 1 1; to the .box {} rules, the computed width becomes now 226.5px for Box 1 and 2, and Box 3 got 411px.

My parent container width is 864px. So, 864 - 103.53 + (94.52 * 2) is equal to 571.43px. So this amount of space is distributed then, but I am not able to do the math which can show how each box got its final width.

Can anyone help by explaining this?

Upvotes: 0

Views: 878

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78550

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.

— flex-grow MDN Article

As you can see, the size is relative to the other children. Given that your container is 864px wide, the children will be 184.5px wide not including padding or borders. We get to that number by dividing the width by the total grow values after subtracting the padding and border widths of the flex children out of the total width: (864 - 21*6) / 4 = 184.5 (21*6 accounts for three left borders, three right borders, three left padding values, and three right padding values). So with flex-grow set to 1,1,2, you get 184.5px,184.5px,369px respectively. Include the padding and border to get to the original width total: 184.5+184.5+369 + 40+40+40 + 2+2+2 = 864. So you have the right idea. It's just that the "width" of the children is the width excluding padding and border width.

Ultimately, you can see this illustrated below. 1,1,2 translates to 184.5px,184.5px,369px when only calculating using the "content" portion of the box model width for the flex children:

.container {
  border: 1px solid #59c;
  width: 864px;
  background: #ccc;
  height: 200px;
  margin: 0 auto;
  display: flex;
  padding: 30px;
}

.box {
  font-size: 18px;
  font-weight: 800;
  background: #e5f;
  border: 1px solid #99c;
  padding: 20px;
  
  flex: 1 1;
}

.box2 {
   flex: 2 1;
}

.box{position:relative}
.box:after{content:'184.5px';position:absolute;left:20px;right:20px;bottom:50%;text-align:center;border-bottom:2px solid;}
.box:before{content:'';position:absolute;left:20px;right:20px;bottom:50%;border:1px solid;border-width:0 2px;height:8px;margin-bottom:-3px;}
.box2:after{content:'369px';}
<div class="container">
  <div class="box"> BOX 1</div>
  <div class="box"> BOX 2</div>
  <div class="box box2"> BOX 3 .</div>
</div>

Upvotes: 1

Related Questions