dgrid onDemandGrid renders larger than the space it's in, therefore causing vertical scrolling - dojo

Question

I'm trying to render the dgrid without the vertical scrollbar showing up, but for some reason, it always renders larger than the space it's in.
When the grid loads, it renders at 400x300 even though the space is only 300x200 which then causes vertical scrolling. How do I prevent that?
addGrid: function () {
this.grid = (declare([OnDemandGrid, Selection]))({
id: "tgrid" + this.reportId,
loadingMessage: 'Loading data...',
noDataMessage: 'No results found.',
allowTextSelection: true,
scroller: true,
collection: new Memory({
idProperty: "id"
}),
columns: {
trackName: "Name",
urn: {
label: "URN",
renderCell: function(object, value, cell) {
if(typeof value === 'undefined' ) {
cell.bgColor = "red";
} else {
cell.innerHTML = value;
}
}
},
location: "Location",
affiliation: "Affiliation",
eta: "ETA",
lta: "LTA"
}
}, this.gridId);
//next get the tracks using this call
this.getTracks();
}
.dgrid {
height: auto;
}
.dgrid-row {
padding: 3px 0 2px 9px;
}
.dgrid-scroller {
position: relative;
overflow: auto;
max-height: 95%;
}