如何删除flexbox中所有换行行的左右边距（没有nth-child或js）

我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距，而不使用 ::nth-child 或 JavaScript。如果这是不可能的，那么我想下一个最好的方法是在主弹性盒元素上设置负左/右边距，但我不太确定使用弹性盒来做到这一点的最佳方法是width: 100%。基本上我想要的是这个弹性盒的左侧和右侧没有蓝色。

EDIT:我必须在这里为我自己的问题提供一个解决方案。我放在一起有效的东西 http://jsfiddle.net/bgvqctcu/使用包装元素overflow: hidden并且弹性盒设置为width: calc(100% + 5px)。结果发现 Internet Explorer 不支持box-sizing: border-box在弹性盒中，但有一个解决方法我在这里找到了 https://stackoverflow.com/questions/21942183/multiline-flexbox-in-ie11-calculating-widths-incorrectly.

jsFiddle http://jsfiddle.net/Ljmkxvgk/

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;
}

我改变了justify-content to space-between，并调整了 flex-basis 以适应这一变化，并在顶部和底部提供元素填充，但在左侧和右侧设置 0。

相关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;
}