The goal
========

[See the fiddle](http://jsfiddle.net/p4Ev4/) for the code below. **I want the `inner` div to be sized according to [the W3C specification of `box-sizing: content-box`](http://www.w3.org/TR/css3-ui/#box-sizing0), without modifying or removing any of the [non-empty CSS declarations](http://www.w3.org/TR/CSS2/syndata.html#declaration), [selectors](http://www.w3.org/TR/CSS2/selector.html#selector-syntax) or [HTML elements](http://www.w3.org/TR/html-markup/syntax.html#syntax-elements).** (I want the current Chrome and Firefox versions, and Internet Explorer 11 to be supported.)

HTML:

```
<div id="outer">
    <div id="inner"></div>
</div>

```

CSS:

```
#outer
{
    background:red;
    display:table-cell;
    height:300px;
    width:300px;
}
#inner
{
    background:yellow;
    height:50%;
    padding:75px;
    width:50%;
}

```

Visual result:

![300px by 300px all yellow box](https://i.stack.imgur.com/FFqIZ.jpg)

Box-model of the `inner` div:

![content: 150x150, padding: 75, border: 0, margin: 0](https://i.stack.imgur.com/zpL7z.jpg)

The problem
===========

A buggy sizing method is used in Chrome (version: 35.0.1916.153 m, OS: Windows 7).

Visual result:

![top half yellow, bottom half red of 300px by 300px rectangle](https://i.stack.imgur.com/aHYVE.jpg)

Box-model of the `inner` div:

![content: 150x0, padding: 75, border: 0, margin: 0](https://i.stack.imgur.com/gv17s.jpg)

Additional info
===============

* the vertical sizing of the `inner` div in Chrome is the same as [the W3C specification of `box-sizing: border-box`](http://www.w3.org/TR/css3-ui/#box-sizing0)
* setting `box-sizing: content-box` explicitly doesn't solve the problem
* both FF and IE11 works as expected, only Chrome not
* the sizing problem occurs only if `%` is used as the `inner` div's `height` unit, and the `outer` div is displayed as a `table-cell`
* a GIF illustrating the vertical sizing problem (no immediate growth):

![GIF illustrating the vertical sizing problem](https://i.stack.imgur.com/K40bB.gif)