Css 内容太宽时Flexbox未包装

我有一个两列布局，在列的父级上设置了flexbox和

flex-wrap:wrap

。但是，即使内容明显大于列设置的宽度百分比，列也不会环绕。当内容宽度超过百分比宽度时，如何使列换行

.wrapper{
显示器：flex；
柔性包装：包装；
高度：100px；
宽度：300px；
}
.左{
宽度：60%；
背景颜色：浅蓝色；
}
.对{
宽度：40%；
背景颜色：浅珊瑚；
}

第1列第2列第3列第4列

由于列没有增长，因此列没有包装。您可以通过将列的

width

属性更改为

flex basis

属性来解决此问题。弹性基础是弹性计算的起点，但宽度将根据需要进行调整。有关更多详细信息，请参阅

.wrapper{
显示器：flex；
柔性包装：包装；
高度：100px；
宽度：300px；
}
.左{
弹性基准：60%；
背景颜色：浅蓝色；
}
.对{
弹性基准：40%；
背景颜色：浅珊瑚；
}

第1列第2列第3列第4列

添加

最小宽度：0到您的元素，您将返回到初始问题。Flex basis之所以有效，是因为在处理宽度时未应用最小宽度约束（您可以通过将
min-width:min-content；
添加到您的第一个代码中，这是解决问题的另一个备选方案）