Flexbox调整大小事件（？）

Question

所以我有一个大量使用flexbox的布局。 我一直非常喜欢它，它很棒。 作为一个注释，我也大量使用AngularJS，而且我使用ng-include （或其他东西）可能会导致问题。

问题是我使用第三方组件绘制网格（ 角度网格是特定的）。 它只在从JavaScript专门调用时调整其列的大小，并且也可以在初始化后设置为执行此操作。

这里的问题是列没有正确调整大小。 他们似乎被重新调整到不同的空间。 我非常肯定的是，flexbox首先绘制对象而不考虑flex，然后在加载东西后，布局会延伸。

假设我的假设是正确的，我希望解决这个问题的方法是找到一个JavaScript（或JQuery或Angular）事件，以便在调整大小时进行监听，然后通知网格它需要重绘列。 话虽如此，我还没有找到这样的事件，所以也许我正在接近这个问题，或者我可能没有选择最好的搜索词。

只是为了帮助可视化问题，这里是一个HTML示例（网格有点奇怪）。 （style =“...”实际上是通过css类或Angular Material标签定义的 - 请参见此处 。）

<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>

谢谢你的时间。

Answer 1

如果您认为是这种情况，那么您可以尝试3件事。

1）为你的内部网格div添加一个flex-basis ，以便它可以直接加载到适当的大小，避免调整大小问题。

2）在初始化ag-grid并将数据添加到您的状态后应用display: flex 。

3）一旦加载数据并初始化ag-grid，使用requestAnimationFrame方法重绘ag-grid（这可能是你正在寻找的最接近的东西，特别是等待borwser重新绘制完成）