html - On a flex item with flex-grow: 1, why is padding expanding the width? -

check out snippet below.

in first row, there 2 divs flex-grow: 1. expected, each div takes 50% of screen.

when adding padding left div, no longer case. can explain why?

body > div {    height: 50px;    display: flex;  }  body > div > div {    flex: 1;    box-sizing: border-box;  }  #a {    background-color: red;  }  #b {    background-color: green;  }  #c {    padding: 10px;    background-color: blue;  }  #d {    background-color: yellow;  }

<div>    <div id="a"></div>    <div id="b"></div>  </div>  <div>    <div id="c"></div>    <div id="d"></div>  </div>

the calculations defined in spec

the size of flex item padding , flex-grow based on calculations outlined in flexbox specification.

these calculations similar sizing of flex items padding , flex-shrink.

frankly, math quite technical , not easiest thing in world understand.

but if want it, here details:

• 9.7. resolving flexible lengths
• how flex-shrink factor in padding , border-box?

---

examples

below examples make behavior more clear.

note: keep in mind, flex-grow not tool directly establishing length of flex item. it's tool distributing space in container among flex items. flex-basis property sets initial main size of flex item. if flex-grow used flex-basis, problem in question resolved (see example #4 below).

example #1

in block container, have box-sizing: border-box, boxes in code render evenly regardless of padding.

body > div {    height: 50px;    /* display: flex; */    font-size: 0; /* remove inline block whitespace */  }  body > div > div {    /* flex: 1; */    box-sizing: border-box;    height: 50px;    display: inline-block;    width: 50%;  }  #a {    background-color: red;  }  #b {    background-color: green;  }  #c {    padding: 10px;    background-color: blue;  }  #d {    background-color: yellow;

<div>    <div id="a"></div>    <div id="b"></div>  </div>  <div>    <div id="c"></div>    <div id="d"></div>  </div>

jsfiddle demo

---

example #2

in flex container, have box-sizing: border-box, , width or flex-basis used calculate length, boxes render evenly regardless of padding.

body > div {    height: 50px;    display: flex;    }    body > div > div {    flex-basis: 50%;    /* width: 50%; works, */    box-sizing: border-box;  }    #a {    background-color: red;  }  #b {    background-color: green;  }  #c {    padding: 10px;    background-color: blue;  }  #d {    background-color: yellow;

<div>    <div id="a"></div>    <div id="b"></div>  </div>  <div>    <div id="c"></div>    <div id="d"></div>  </div>

jsfiddle demo

---

example #3

in flex container, have box-sizing: border-box , flex-grow, appear box-sizing doesn't work...

body > div {    height: 50px;    display: flex;    }    body > div > div {    flex: 1;    /* flex-basis: 50%; */    /* width: 50%; works, */    box-sizing: border-box;  }    #a {    background-color: red;  }  #b {    background-color: green;  }  #c {    padding: 10px;    background-color: blue;  }  #d {    background-color: yellow;

<div>    <div id="a"></div>    <div id="b"></div>  </div>  <div>    <div id="c"></div>    <div id="d"></div>  </div>

jsfiddle demo

but that's not correct...

---

example #4

flex-grow expands width of flex item based on available space in flex container. in other words, ignores padding (and borders).

however, if specify flex-grow along flex-basis, border-box work:

flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */ 

body > div {    height: 50px;    display: flex;    }    body > div > div {    flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */    /* flex-basis: 50%; */    /* width: 50%; works, */    box-sizing: border-box;  }    #a {    background-color: red;  }  #b {    background-color: green;  }  #c {    padding: 10px;    background-color: blue;  }  #d {    background-color: yellow;

<div>    <div id="a"></div>    <div id="b"></div>  </div>  <div>    <div id="c"></div>    <div id="d"></div>  </div>

jsfiddle demo