How to get 33.33% width flex divs in multiple rows?

I am trying to get flex divs stacked in rows of 3. Sometimes I will have 3 divs, sometimes 6 or 21, etc. I got the widths and paddings figured out, but I can't figure out how to get them to start a new row after each set of 3.

How can I achieve that? Right now it's putting them all in 1 line.

The HTML code is like this:

<div id="container"><div class="sections__container"><div class="sections__container__a">A-1</div><div class="sections__container__b">A-2</div><div class="sections__container__c">A-3</div><div class="sections__container__a">B-1</div><div class="sections__container__b">B-2</div><div class="sections__container__c">B-3</div></div> </div>

Each flex div is using CSS like:

width: 33.33%;height: 100%;float: left;flex-grow: 1;

And here's a jsFiddle to make things easier:https://jsfiddle.net/xr746syj/

Thank you so much for any advice :)