In this example there is a nested border containers. When the lower border container resizes the content panes in the upper border container does not resize when the lower one resizes but the table does.
Here is the example
<head>
<title>dijit.layout.BorderContainer Test</title>
<style type="text/css">
@import "../../../dijit/themes/tundra/tundra.css";
body{overflow: hidden;}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body style="height:100%;width:100%" class=" tundra">
<div id="Div1" dojoType="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;border:3px solid yellow">
<div dojoType="dijit.layout.ContentPane" region="center" style="border:3px solid black" >
<table border="5" height="100%" width="100%" >
<tbody>
<tr >
<td style="background-color:Aqua;" height="100%" >
<div id="splitContainer" dojoType="dijit.layout.BorderContainer" design="sidebar" style="width:100%;height:100%;border:3px solid red">
<div dojoType="dijit.layout.ContentPane" region="left" style="overflow:hidden;border:3px solid blue" splitter="true" >
left
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="border:3px solid black" >
center
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border:3px solid black;height:40%" splitter="true">
tab detail
</div>
</div>
</body>
<title>dijit.layout.BorderContainer Test</title>
<style type="text/css">
@import "../../../dijit/themes/tundra/tundra.css";
body{overflow: hidden;}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body style="height:100%;width:100%" class=" tundra">
<div id="Div1" dojoType="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;border:3px solid yellow">
<div dojoType="dijit.layout.ContentPane" region="center" style="border:3px solid black" >
<table border="5" height="100%" width="100%" >
<tbody>
<tr >
<td style="background-color:Aqua;" height="100%" >
<div id="splitContainer" dojoType="dijit.layout.BorderContainer" design="sidebar" style="width:100%;height:100%;border:3px solid red">
<div dojoType="dijit.layout.ContentPane" region="left" style="overflow:hidden;border:3px solid blue" splitter="true" >
left
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="border:3px solid black" >
center
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border:3px solid black;height:40%" splitter="true">
tab detail
</div>
</div>
</body>
Any ideas why?