ag-grid：使用CSS flex在列视图布局中的多个网格

Question

我正在尝试使用CSS flex显示ag-grid的列，但努力让它适合页面宽度。下面是HTML和CSS。

HTML：

<div class="page-wrapper">
  <div class="header-wrapper">header</div>
  <div class="body-wrapper">
    <users>
      <layout-manager>
        <div class="view-column">
          <div class="view-content">
            <div id="myGridA" class="content ag-fresh"></div>
          </div>
        </div>
        <div class="view-column">
          <div class="view-content">
            <div id="myGridB" class="content ag-fresh"></div>
          </div>
        </div>
        <div class="view-column">
          <div class="view-content">
            <div id="myGridC" class="content ag-fresh"></div>
          </div>
        </div>
      </layout-manager>
    </users>
  </div>
  <div class="footer-wrapper">footer</div>
</div>

CSS：

body, app-root, .page-wrapper, .body-wrapper, 
users, .view-row {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

layout-manager {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin: 0;
}

.view-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.view-content { 
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0;
}

.content {
  background-color: #AA0000;
  flex: 1;
  display:flex;
  flex-direction: column;
  width: 100%;
}

.header-wrapper,
.footer-wrapper {
  background-color: grey;
  margin: 0;
  padding: 15px;
}

Plunker示例：https://plnkr.co/edit/uxkQDxy0THN2fKgL0NX5

我是否错过了CSS样式中的错误或做错了什么？非常感谢一些帮助，因为我已经围绕着这个...... :(

由于