Why does the CSS height property not get calculated properly for a div with display:table containing a div with display:caption? -

Why does the CSS height property not get calculated properly for a div with display:table containing a div with display:caption? -

i can't figure out why height of #container div calculated correctly @ 200px when display:table-row applied #header div , it's big when display:table-caption applied #header div.

i've tested in chrome 35

does know why case and/or there simple fix? ( preferably without javascript or adding divs)?

i want #header div's height little it's content, , it's width 100% of #container div, , #container fit in #main div.

jsfiddle: http://jsfiddle.net/2sky4/

css:

#main { width: 200px; height: 200px; background-color:#ff0; } #container { background-color: #0f0; width: 90%; display:table; height:100%; } #header { background-color:#f0f; display:table-caption; } #splitpanel { display:table-row; background-color:#0ff; } #leftpanel { background-color: #f00; overflow: scroll; display: table-cell; } #rightpanel { background: #00f; overflow: scroll; display: table-cell; }

html:

<div id="main"> <div id="container"> <div id="header">header</div> <div id="splitpanel"> <div id="leftpanel"></div> <div id="rightpanel"></div> </div> </div> </div>

i not sure want. fiddle has want seems. improve off showing snapshots , want. using "display" of different types doesnt create much sense. can please describe construction want in snapshot?

css