Flexbox Resize Event(?)

Question

So I have a layout that heavily uses flexbox. I've been quite enjoying it, and it's great. As a note, I'm also heavily using AngularJS, and it's possible that my use of ng-include (or something else) might be contributing to the problem.

The problem is that I'm using a 3rd party component to draw a grid (angular-grid to be specific). It only resizes its columns when specifically called from JavaScript and can also be setup to do so once after initializing.

The problem here is that the columns aren't being resized correctly. They are seemingly resized to a different space. What I'm pretty certain is happening is that flexbox first draws the objects without accounting for flex, then after things are loaded, the layout stretches.

Assuming I'm correct in my assumption, I expected the solution to this would be finding a JavaScript (or JQuery or Angular) event to listen for when it's done resizing, then inform the grid that it needs to redraw the columns. That being said, I haven't found such an event, so maybe I'm approaching the problem wrong, or maybe I just haven't chosen the best search terms.

Just to help visualize the problem, here's an example HTML (the grid is a bit weird). (The style="..." is actually defined through css classes or Angular Material tags - see here.)

<div style="display: flex; flex-direction: column;">
  <h1>Example Fixed Width Tag</h1>
  <div style="position: relative; flex: 1">
    <div ag-grid="definition" style="width: 100%; height: 100%; position: absolute;">
    <!-- This is where the grid is drawn. -->
    <!-- The position: absolute is done because the grid requires the div here have -->
    <!-- a height and width property. -->
    </div>
  </div>
</div>

Thanks for your time.

Answer 1

If what you assume is the case, then there are 3 things you can try.

1) Add a flex-basis to your inner grid div so that it loads with the appropriate size right off the bat, avoiding the resize issue.

2) Apply the display: flex after initializing the ag-grid and adding the data to your state.

3) Redraw the ag-grid using requestAnimationFrame method once data is loaded and ag-grid initialized (this is probably the closest thing you're looking for in particular as far as waiting for borwser repainting to finish)