Html 设置flexbox中项目的初始宽度

我对flexbox有问题，我正试图让我的第一个

.cell1

占据它里面3个项目的宽度，所以它应该是300px宽，所以我把它设置为

flex:0 0 auto

，我把

.cell2

设置为

flex:1

，所以它占用了剩余的空间，但没有这样做，它似乎重叠了

。cell1

，我不确定为什么?

如何让

.cell1

占据其中3个项目的宽度，让

.cell2

占据剩余的宽度

.wrap{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.cell1{
显示器：flex；
flex:0自动；
弯曲方向：行；
}
.cell2{
显示器：flex；
弹性：1；
背景：#ff0000；
}
.项目1{
flex:0100px；
背景：#ff0000；
}
.项目2{
flex:0100px；
背景：#0000ff；
}
.项目3{
flex:0100px；
背景：#ff00ff；
}

项目1
项目2
项目3
细胞2

使用

宽度

而不是

弹性基础

。这是一个已知的bug，您可以在此处了解更多信息：

（在@Michael_B接受的答案末尾）

影响所有主要浏览器（IE 11和Edge除外）的错误：

在嵌套的flex容器中忽略flex基础宽度有效。问题 在嵌套flex容器中调整flex项目大小时发现

.wrap{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.cell1{
显示器：flex；
弯曲方向：行；
}
.cell2{
显示器：flex；
弹性：1；
背景：#ff0000；
}
.项目1{
宽度：100px；
背景：#ff0000；
}
.项目2{
宽度：100px；
背景：#0000ff；
}
.项目3{
宽度：100px；
背景：#ff00ff；
}

项目1
项目2
项目3
细胞2