border-box

In the snippet below, the first row has two divs with flex-grow: 1 . As expected, each div takes up 50% of the screen. When adding padding to the left div, that is no longer the case. Can someone 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 are defined in the spec. A flex

I realised that <input type="submit"/> has a border-box box model, whereas <input type="text"/> has a content-box box model. This behavior is present in IE8 and FF. Unfortunately, this prevents me from applying this style for nice evenly sized inputs: input, textarea { border: 5px solid #808080; padding:0px; background-color:#C0C0C0; width:20em; } Is this correct behaviour by IE and FF? And is there a cross-browser way around this problem? Is this correct behaviour by IE and FF? It's not really stated in the standard how form field decorations are controlled by CSS. Originally they were

On the form, I have one select and two input fields. These elements are vertically aligned. Unfortunately, I can't get equal width of these elements. Here's my code: <select name="name1" style="width:198px"> <option>value1</option> <option>value2</option> </select><br/> <input type="text" name="id1" style="width:193px"><br/> <input type="text" name="id2" style="width:193px"> For above example, the best width for select element is 198 or 199 px (of course I tried 193px, but the difference is major). I think, it depends on resolution, on various computers and browsers since these elements don't