Take a look at this code snippet: 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;
}
In this scenario, setting padding on a flex item (#a) alters its width in the 'border-box' model. How can I make its computed width not consider the padding? Essentially, I want each box to occupy 33% of the document width.
Update: Thank you for the responses so far. In actuality, there are additional boxes in the row with fixed widths. For example, check out this updated snippet: http://jsfiddle.net/56qwuz6o/7/. Here, I aim for #a, #b, and #c to all have identical widths.
<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;
}