kendo grid overflow outside kendo tabstrip

I have Kendo tab on kendo splitter and Kendo Grid on the tab inside splitter. When i set fixed height for kendo grid it flows out of the tab container instead of streching the container and providing scroll bar. Any suggestion is appreciated. I've attached sample file and code snippet


          <div id="glaDocumentHost" class="glaReset">
              <ul>
                <li><label id="map">Grid</label></li>
               </ul>
               <div>
                    <div id="mecOutageGrid" style="height:100px"></div>
                </div>
         </div>

 $("#glaDocumentHost").kendoTabStrip();

        $("#mecOutageGrid").kendoGrid({
            groupable: true,
           sortable: true,
   dataSource: new kendo.data.DataSource({data:[{text:"one", value:"one"}, {text:"one", value:"one"},{text:"one", value:"one"}, {text:"one", value:"one"},{text:"one", value:"one"}, {text:"one", value:"one"},{text:"one", value:"one"}, {text:"one", value:"one"},{text:"one", value:"one"}, {text:"one", value:"one"}]}),
            columns: [{ title: "Site ID", field:"text" },
            { title: "Outage Started", field:"value" }]
        });