I'm using CSS flexbox to build a scalable, responsive grid. When applying a Google chart to one of the flexbox items, the item changes size ever so slightly. It's enough to throw the grid out of alignment. I put together the following images to help illustrate the issue.

Flexbox grid before applying Google chart to item 6:

[![Flexbox Layout - Before Google Chart](https://i.stack.imgur.com/EeVbw.png)](https://i.stack.imgur.com/EeVbw.png)

Flexbox grid after applying Google chart to item 6:

[![Flexbox Layout - After Google Chart](https://i.stack.imgur.com/7IXqQ.png)](https://i.stack.imgur.com/7IXqQ.png)

The Flexbox grid loads faster than the Google chart, so the grid originally loads correctly. However when the chart loads, item 6 expands slightly, causing image 2 above.

The middle column flex container and item 6 div are setup in css as follows:

```
#middlecolumn {
    width: 75%;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0.25%;
}

#item6_div {
    flex: 3;
    margin-top: 0.8vh;
}

```

Note that items 5 and 7 are setup the same way in css, with `flex` values of `1`. I.e. item 6 is 3 times the height of items 5 and 7. As such, when item 6 resizes, the 3:1 ratio is maintained.

Is there something I'm missing in css to prevent the Google chart from resizing its flexbox container item?