How is space divided amongst flex items when flex-basis and flex-grow both are set?

Question

I am going through a basic flexbox tutorial from MDN and cant get my head around on how is the remaining space divided amongst the flex item, when flex-basis is set.

In the live demo , I set the following code:

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

My browser screen is 1369px , after taking the scrollbar out I am left with 1349px . MDN says that

"Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared out according to the proportion units."

So the available space after min 200px is given to each article should be 1349px - 3*200px = 749px . Now, the article three should get half of the available space plus 200px , that is 200 + 749/2 = 575.5 . Taking 10px margin space out from both sides we get 555.5px , but in my laptop it occupies 535.5px .

Below is the working demo:

 * { box-sizing: border-box; } html { font-family: sans-serif; } body { margin: 0; } header { background: purple; height: 100px; } h1 { text-align: center; color: white; line-height: 100px; margin: 0; } article { padding: 10px; margin: 10px; background: aqua; flex: 1 200px; } /* Add your flexbox CSS below here */ section { display: flex; } article:nth-of-type(3) { flex: 2 200px; }

 <header> <h1>Sample flexbox example</h1> </header> <section> <article> <h2>First article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> </article> <article> <h2>Second article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> </article> <article> <h2>Third article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p> </article> </section>

1. Please explain how is space divided amongst flex items when flex-basis and flex-grow both are set?

2. If I do article:nth-of-type(3) { flex: 2; } article:nth-of-type(3) { flex: 2; } it doesn't give double space to article 3, why?

Answer 1

Margin should be considered initially and removed from the total width in order to calculate the free space. Not later, like you are doing.

So all your elements start with 200px width and 20px margin. The free sapce will be 1350px - 3*200px - 3*20x = 690px . Now, the article three should have a width equal to 2/4*690px + 200px = 545px (and not 555px )

without box-sizing you will have 1350px - 3*220px - 3*20x = 630px and the width will be 535px