JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper" class="wrapper">
<div id="top" class="top">
<!-- ko foreach:boxes -->
<span class="box" data-bind="text:text">
</span>
<!-- /ko -->
<span class="box new">
<button data-bind="click:addBox">+</button>
</span>
</div>
<div id="chart">
Chart
</div>
</div>
CSS
body{margin:0}
.wrapper{
position:absolute;
border:1px solid red;
height:calc(100% - 2px); /* account for border in this example */
width:calc(100% - 2px); /* account for border in this example */
}
.top{
border: 1px solid magenta;
padding-bottom:5px
}
#chart{
border: 1px solid blue;
}
.box {
width:150px;
height:50px;
border: 2px solid black;
display:inline-block;
vertical-align:top;
margin:5px 0 0 5px
}
.box.new{
border:1px dashed black;
}
.box.new button{
display:inline-block;
width:100%;
height:100%;
text-align:center;
font-size:3em;
border:none;
background:none;
}
JavaScript
function ViewModel(){
var self = this;
self.boxes = ko.observableArray([new Box(0)]);
self.addBox = function(){
self.boxes.push(new Box(self.boxes().length));
Fill();
}
}
function Box(index){
self.text = "Box " + index;
}
ko.applyBindings(new ViewModel())
var Fill = function (){
var top =document.getElementById("top").offsetHeight;
var wrapper =document.getElementById("wrapper").clientHeight;
document.getElementById("chart").setAttribute("style","height:"+(wrapper-top-1)+"px");
}
var addEvent = function(elem, type, eventHandle) {
if (elem == null || typeof(elem) == 'undefined') return;
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
} else {
elem["on"+type]=eventHandle;
}
};
addEvent(window, "resize", Fill);
Fill();