DOJO ContentPane inner DIV height changing on ContentPane resize

http://stackoverflow.com/questions/10832653/dojo-contentpane-inner-div-height-changing-on-contentpane-resize

by renfley

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<div id="indent_1" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="
        design: 'headline',
        gutters: true,
        liveSplitters: true
        ">
    <div id="indent_1_1" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="
            design: 'headline',
            gutters: true,
            region: 'center'
            ">
        <div id="indent_1_1_1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="
                region: 'center'
            ">indent 1.1.1 (region: 'center')</div>
        <div id="indent_1_1_2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="
                region: 'bottom'
            ">indent 1.1.2 (region: 'bottom', height: 100px;)</div>
    </div>
    <div id="indent_1_2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="
            region: 'bottom',
            splitter: true
        ">indent 1.2 (splitter: true)</div>
</div>

CSS

html, body {
}
#indent_1 {
    height: 500px;
    background-color: #ccc;
}
#indent_1_1 {
    background-color: green;
}
#indent_1_2 {
    background-color: white;
}
#indent_1_1_1 {
}
#indent_1_1_2 {
    height: 100px;
}

JavaScript

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"], function (
ready, aspect, registry) {

    // code needed to resize <divs> 
    // not needed at all if layout is based on nested
    // BorderContainer
    ready(function () {
        var bc = registry.byId("indent_1_1");
        aspect.after(bc, "resize", function () {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });

});