Javascript 在flex布局中处理滚动条宽度

我试图建立一个表格列表，它可以滚动到固定的标题行。除了显示滚动条时标题与列不一致外，所有这些都工作正常。标记的简化示例如下：

<div layout="column">
  <div>
    <div layout="row">
      <div flex="25">
        <span>Col 1</span>
      </div>
      <div flex="25">
        <span>Col 2</span>
      </div>
      <div flex="50">
        <span>Col 3</span>
      </div>
    </div>
  </div>
  <md-virtual-repeat-container flex layout-fill>
    <div md-virtual-repeat="row in rows" md-on-demand flex>
      <div layout="row">
        <div flex="25">
          <span ng-bind="row.col1"></span>
        </div>
        <div flex="25">
          <span ng-bind="row.col2"></span>
        </div>
        <div flex="50">
          <span ng-bind="row.col3"></span>
        </div>
      </div>
    </div> 
  </md-virtual-repeat-container>
</div>

第1列
第2列
第3列

---

问题是，当行溢出时，会显示一个滚动条，行上的flex计算会对此进行解释，而标头（没有滚动条）则不会，这会导致未对齐。我现在能想到的最好的解决方案是始终在行上显示滚动条（它通常会溢出），并添加一些JavaScript来计算当前浏览器的滚动条宽度，并在标题中添加匹配的右边距，但如果有更好的方法，我宁愿不这样做？

如果您提供一个工作代码段，我们将能够提供一个适当的答案。