How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)

Question

I'm looking for a good way to remove the left and right margins from each first and last item in each row without using ::nth-child or JavaScript. If that's not possible then I guess the next best way would be to set negative left/right margins on the main flexbox element, but I'm not quite sure the best way to do it with a flexbox that is width: 100%. Basically what I want is for there to be no blue color on the left and right of this flexbox.

EDIT: I'm gonna have to provide a solution to my own question here. I put together something that works using a wrapper element with overflow: hidden and the flexbox is set to width: calc(100% + 5px). Turns out Internet Explorer doesn't support box-sizing: border-box in flexboxes, but there's a workaround that I found here.

jsFiddle

HTML:

<div id="main">
    <div><span>div 1</span></div>
    <div><span>div 2</span></div>
    <div><span>div 3</span></div>
    <div><span>div 4</span></div>
    <div><span>div 5</span></div>
    <div><span>div 6</span></div>
    <div><span>div 7</span></div>
    <div><span>div 8</span></div>
    <div><span>div 9</span></div>
    <div><span>div 10</span></div>
    <div><span>div 11</span></div>
</div>

CSS:

#main {
    margin-right: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    background-color: lightblue;
}
#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 33.3%;
    flex: 0 0 33.3%;
    border: 5px solid transparent;
}
#main div > span {
    display: block;
    width: 100%;
    min-height: 50px;
    background-color: #eaeaea;
}

Answer 1

I changed the justify-content to space-between, and adjusted the flex-basis to accompany this change as well as giving the elements padding on top and bottom, but 0 on left and right.

Relevant CSS:

#main {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    background-color: lightblue;
}

#main div {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 32.3%;
    flex: 0 0 32.3%;

   padding-right:0px;
   padding-left:0px;
   padding-bottom:5px;
   padding-top:5px;
}