UI-Grid: columns resizing ends in overflowing the grid - css

Question

I have a grid that consists of several columns. I defined columnDefs including width and min width. In addition I have disabled the horizontal scrollbar.
When resizing the columns to the right they "exit" the grid and I can see them by scrolling (although there is no scroll). How can I force the columns to stay in the grid boundaries?
This is the regular view:
After resizing to the right and scrolling to the right, you can see that the "name" column is off boundaries (on the left side)
Grid Config
columnDefs: this.queueConfig.columns,
rowHeight: 24,
rowTemplate: rowtpl,
enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
enableColumnMenus: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFiltering: true,
modifierKeysToMultiSelect: true,
multiSelect: true
Column Definitions
This is a function that returns the columnDefs for the grid.
The details are not important, only to notice the width definition for our issue.
private buildGridColumns(): any {
const colMinWidth = "100";
const columnsMap = {
name: {
name: this.$translate.instant('Name'),
field: "documentName",
minWidth: colMinWidth
},
step: {
name: this.$translate.instant('Col_Step'),
field: "status",
width: "150",
minWidth: colMinWidth,
cellFilter: "printStatus"
},
submitted: {
name: "Submitted",
field: "createdTime",
width: "150",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
sort: {
direction: this.uiGridConstants.DESC
}
},
pagesNum: {
name: this.$translate.instant('NumPages'),
field: "numPages",
width: "80",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
quantity: {
name: this.$translate.instant('Quantity'),
field: "numCopies",
width: "80",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
progress: {
name: "Progress",
field: "PercentComplete",
minWidth: colMinWidth,
cellTemplate:
"<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
"<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
},
duration: {
name: this.$translate.instant('Duration'),
field: "estimatedTime",
minWidth: colMinWidth,
cellFilter: "foreignDocument: this"
},
status: {
name: this.$translate.instant('Status'),
field: "docState",
minWidth: colMinWidth,
cellFilter: "documentState"
},
press: {
name: this.$translate.instant('Press'),
field: "dfeName",
minWidth: colMinWidth
},
created: {
name: this.$translate.instant('Created'),
field: "createdDtm",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
sort: {
direction: this.uiGridConstants.DESC
}
},
time: {
name: this.$translate.instant("Time"),
field: "createdTime",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
},
failTime: {
name: this.$translate.instant('FailureTime'),
field: "lastUpdateTime",
minWidth: colMinWidth,
cellFilter: "date: 'd/M/yy h:mm a'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
},
completeTime: {
name: this.$translate.instant('CompletionTime'),
field: "lastUpdateTime",
minWidth: colMinWidth,
cellFilter: "date: 'short'",
width: "120",
sort: {
direction: this.uiGridConstants.DESC
}
}
};
return columnsMap;
}