Bootstrap主栏列无法占满宽度的问题求助

各位好，我最近在用Bootstrap做布局时遇到了一个小问题，折腾半天没找到原因，来请教大家～

我创建了一个简单的行容器，里面包含两个子列：侧边栏（className为col-md-2）和主栏（className为col-md-10）。为了让两个子元素并排显示，我给父元素的row类额外加了display:flex的样式。

实际显示的效果如下（注：我把图片左右翻转了，方便大家看到左侧的表现，实际gutter是出现在右侧的）：

实际 gutter 出现在右侧，翻转后展示左侧效果

我的代码如下：

<div style={{display:'flex'}} className='row'>
  <div className='sidebar col-md-2'>
  </div>
  <div className='mainbar container-fluid border col-md-10' >
    Home
  </div>
</div>

按道理来说，两个列的数字加起来是12，完全符合Bootstrap栅格系统的规则，但主栏就是没办法占据预期的完整宽度。我本来预期主栏能够占满屏幕剩下的全部宽度，请问这是什么原因导致的呀？有没有什么解决办法？

备注：内容来源于stack exchange，提问作者A.M. Samara simha reddy