Drag the dividers to change the size of the child elements.
<style type="text/css"> .myDivClass { background-color: rgba(66, 142, 66, .8); } .divBox { width:90%; margin: 0 auto; border:solid thin red; background-color:#aca; } .childElement { background-color: lightyellow; padding: 2px; } </style>
<ui-v-divided-box class="divBox" style="width: 90%; height:300px; border:solid thin red; background-color:#ffc; margin: 0 auto;" divider-width="3" divider-class='myDivClass'> <div class="childElement">one <div class="childElement" style="height: 200px; padding:2px; margin:4px; border:thick solid gold;" min="80">two <div>three </ui-v-divided-box>
<ui-h-divided-box class="divBox" style="height:20px;"> <div class="childElement" style="width: 200px" min="100" max="400">one</div> <div class="childElement" min="100" max="600">two</div> <div class="childElement" min="100">three</div> <div class="childElement" min="100">four</div> </ui-h-divided-box>
<ui-h-divided-box class="divBox" style="height:20px;"> <div class="childElement" style="width: 200px" min="100" max="400">one</div> <div class="childElement" min="100" max="600">two</div> <div class="childElement" style="border:solid thin blueviolet" min="100">three</div> <div class="childElement" min="100">FOUR</div> <div class="childElement" min="100">five</div> <div class="childElement" style="border:solid thick greenyellow" min="100">six</div> <div class="childElement" min="100">seven</div> </ui-h-divided-box>
<ui-h-divided-box class="divBox" style="height:801px;"> <ui-v-divided-box class="divBox" style="width:300px; height:100%; border:solid thick red;" min="300" max="900"> <div class="childElement" min="40">one</div> <div class="childElement" min="40">two</div> <div class="childElement" min="40">three</div> <div class="childElement" min="20">four</div> <div class="childElement" style="border:solid thick green" min="80">five</div> <div class="childElement" min="80">six</div> <div class="childElement" min="80">eight</div> <div class="childElement" min="20">nine</div> </ui-v-divided-box> <ui-v-divided-box class="divBox" style="height:100%;" min="200" id="innerRight"> <div class="childElement" min="100" max="400">one</div> <div class="childElement" min="100" max="600">two</div> <div class="childElement" min="100">three</div> <div class="childElement" min="100">FOUR</div> </ui-v-divided-box> </ui-h-divided-box>