CODEWITHSUNDEEP
cssflexboxweb-frontend
user16215458
user16215458

Reputation:

How is element width calculated with flex-grow?

I am learning CSS and there is a question that I want you to help me solve.

You have an element 'div' that has two children inside it, 'article' and 'aside'.

Suppose the parent 'div' has a width of 900px, the 'article' element has a width of 120px and the 'aside' element has a width of 450px

The CSS looks as follows:

    div {
        width: 900px;
        display: flex;
    }
    
    article {
         flex-grow: 2;
         width: 120px;
    }
    
    aside {
        flex-grow: 1;
        width: 450px;
    }

Each 'flex-grow: 1' will have a width of:

  1. 330px
  2. 110px
  3. 150px
  4. 0 (flex-grow cannot be calculated)

Thank you in advance.

Upvotes: 2

Views: 1377

Answers (2)

Andy Jakubowski
Andy Jakubowski

Reputation: 484

The aside element with the flex-grow factor of 1 will grow by 110px in your scenario.

Here are the rough steps the Flexbox layout algorithm takes to resolve the flexible lengths of the flex items:

Figure out if the flex items should grow or shrink

  • our flex container is 900px wide
  • the sum of the widths of our flex items is 120px + 450px = 570px
  • there’s remaining free space left (900px - 570px = 330px), so our items should grow

Distribute the remaining free space to the flex items

  • first, we add up the flex grow factors of our flex items: flex-grow: 2 for article and flex-grow: 1 for aside gives us a sum of 3
  • now, we proportionally distribute the remaining space to the flex items using this formula: flex item grow factor / sum of all flex item grow factors * remaining free space
    • aside gets an extra 110px, because 1/3 * 330px = 110px
    • article gets an extra 220px, because 2/3 * 330px = 220px

div {
  width: 900px;
  display: flex;
}

article {
  flex-grow: 2;
  width: 120px;
  background-color: tomato;
}

aside {
  flex-grow: 1;
  width: 450px;
  background-color: royalblue;
}

body {
  color: white;
  font-size: 24px;
  line-height: 3;
  text-align: center;
}
<div>
  <article>
    article grows by 220px
  </article>
  <aside>
    aside grows by 110px
  </aside>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273626

You will have 330px of free space (900 - 450 - 120). The first element will grow twice than the second one. The total grow factor is 3 (2+1) so the first one will take 2/3*330 = 220px and the second one 1/3*330px = 110px and we will end with

article = 120px + 220px = 340px
aside   = 450px + 110px = 560px

Inspect the below code to validate the values:

div {
  width: 900px;
  display: flex;
  height: 50px;
}

article {
  flex-grow: 2;
  width: 120px;
  background: red;
}

aside {
  flex-grow: 1;
  width: 450px;
  background: green;
}
<div>
  <article></article>
  <aside></aside>
</div>

Upvotes: 3

Related Questions