解决flex布局position:fixed定位失效的问题

场景：在封装tabbar组件的时候，代码和效果如下图：

#tab-bar {
  display: flex;
  background-color: #ccc;
}

现在我想把导航栏固定到页面下方，自然想到fixed定位，于是兴高采烈（bushi）加了如下代码 ：

 position: fixed;
 bottom: 0;

然后就变成了如下图所示效果：

了解到原来是flex布局和绝对定位、固定定位（fixed、absolute）会产生冲突

解决办法一：

width:100%;

解决办法二： 

  left: 0;
  right: 0;

效果如下：

至此，问题解决。