Flexbox item widths are affected by padding

Question

See http://jsfiddle.net/56qwuz6o/3/:

<div style="display:flex">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

div div {
    flex: 1 1 0;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 50px;
}

When I have padding set on a flex item (#a), its width (in the border-box sense) is affected. How do I make its computed width ignore the padding? ie. I want each of my boxes to take up 33% of the document width.

Edit: Thanks for the answers so far. But in reality, I actually have more boxes in the row that have a fixed width: ie. at http://jsfiddle.net/56qwuz6o/7/, I want #a, #b and #c to all have the same width.

<div style="display:flex; width: 400px">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
</div>

div div {
    flex: 1 1 33%;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 100px;
}

#d {
    flex-basis: 200px;
    width: 200px;
}

Answer 1

A proper `flex: declartion seems to work.

div div {

  flex: 0 0 33%; 
  /* don't grow, don't shrink, be 33% wide */
  /* flex:1 0 33% works too */
  
  border: 1px solid black;
  box-sizing: border-box;
  }

#a {

  padding-right: 100px;

}

<div style="display:flex">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>