解决fit-content不兼容IE浏览器的问题

上一篇博客提到fit-content可以自适应宽度，但是这个属性只能在Chrome浏览器上使用，在Firefox上需要加上-moz-前缀。不能在IE浏览器上兼容，

通过研究发现，width:auto;可以代替这个属性，但是需要在最外层的父元素上面加上属性display:flex;

下图是我的盒子结构，我想让两个子盒子的宽度自适应屏幕的大小，并且一直在页面居中显示，但这两个盒子始终都是互相左对齐的：

 

 

 

下面是我的代码：

.grandfather{

 display: flex !important;

}

.father{

display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
width: auto;
margin: 0 auto;

/*

 

下面这两个属性被我用width:auto;代替了

width: -moz-fit-content; /*firefox
width: fit-content; /*chrome

*/

}

.child1{

display: flex;
justify-content: flex-start;
flex-flow: row nowrap;

}

.child2{

display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row nowrap;

}