Charts don't fit into <div> (highcharts, MVC) Bug?

my page is going to be divided into four equal parts and each part should contain a graph. I'd like graphs to be scaled according to size of the parent <div> + padding. For creating graphs I use dotnet highcharts library but I don't know how to fit charts into the <div>. Here is my code so far:

cshtml divided into four rectangles:

@{
    ViewBag.Title = "Home Page";
}
@model ChartsModel

<div id="main">
    <div id="nw" class="rectangles">
        @Model.Charts[0]
    </div>
    <div id="ne" class="rectangles">
        @Model.Charts[1]
    </div>
    <div id="sw" class="rectangles">
        @Model.Charts[2]
    </div>
    <div id="se" class="rectangles">
        @Model.Charts[3]
    </div>
</div>

css:

html, body { height: 100vh; width: 100%; padding: 0; margin: 0; background: #DDD;}
.rectangles { width: 50%; height: 40vh; float: left; box-sizing: border-box; padding: 10px;}
#nw { background: #DDD; border: 1px solid red; }
#ne { background: #DDD; border: 1px solid red; }
#sw { background: #DDD; border: 1px solid red; }
#se { background: #DDD; border: 1px solid red; }
#main { margin: 0 10vh 10%; }
#line { height: 40px ; background: red; }

My model:

public class ChartsModel
{
    public List<Highcharts> Charts { get; set; }
}

Here is what I get when I insert four random charts from highcharts examples. Width is correct, but height of charts is not: Wrong_height_charts

In above examples, if I try to switch vh for % in height css settings, then height of graphs is correct, but width gets wrong and I loose margin at the bottom of the page: Wrong_width_and_margin_charts

Do you know any solution so that charts fit my <div> and margins/paddings are correct as they should? Or should I use different library then highchart? Thank you for help.

EDIT: OK, I don't know if it some bug of dotnet highcharts, but height sizing does not work even with one graph,

All I am using is this:

<div style="height:300px; width:500px; border: 1px solid red;">
    <div style="height: 100%; width:100%;">@Model</div>
</div>

According to this fiddle it should work http://jsfiddle.net/wkkAd/446/ (if you remove OFF from container). I think I will have to use different approach or library.