ag-grid: multiple grids in column view layout using CSS flex

Question

I'm trying to display columns of ag-grid using CSS flex but struggling to have it fit within the page width. Below is the HTML and 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 example: https://plnkr.co/edit/uxkQDxy0THN2fKgL0NX5

Have I missed or doing something wrong in the CSS styling? Much appreciate some help as I have been going round in circles with this.. :(

Thanks