I have a handsontable in a flex box.
https://jsbin.com/rikufelosi/1/edit?html,output
The behaviour is very odd: at least in Chrome or Safari under Mac, after loading the page, the width of the handsontable is not correct. If we scroll it to the right, then we see the width is extended correctly.
Does anyone know what's happening? and how to fix it?
<!DOCTYPE html><html><head><script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script><script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script><link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css"><script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script><style> .rb { display: flex; flex-direction: column; height: 100%; } .rb .container { flex: 1; display: flex; padding: 0; width: 100%; height: 100% }</style></head><body ng-app="app" ng-controller="Ctrl"><div class="rb"><div class="container"><div style="flex:1; overflow:hidden; height: 100px"><hot-table settings="settings" on-after-create-row="onAfterCreateRow" datarows="sheetHot"></hot-table></div><textarea ng-if='(selectedItem !== "userpanel") && (selectedItem !== "panel")' ng-model="text" style="flex:1"></textarea><div ng-show='selectedItem === "userpanel"' style="flex: 1"></div><div ng-show='selectedItem === "panel"' style="flex: 1"></div></div></div><script> var app = angular.module('app', ['ngHandsontable']); app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function ($scope, $filter, $timeout, hotRegisterer) { $scope.sheetHot = [[5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12], [5, 6, 7, 8, 9, 19, 11, 12]]; $scope.settings = { rowHeaders: true, colHeaders: true, contextMenu: true, onAfterCreateRow: function(index, amount) { console.log("onAfterCreateRow"); $timeout(function() { $scope.$digest(); }); } }; }]);</script></body></html>