Html 设置主flex容器和嵌套flex容器之间的包装优先级

我有一个：

问题是左分区中的项目开始打包的时间比需要的时间早（左分区仍有收缩空间）

内部flexbox只能在外部flexbox包裹后包裹-只要外部flexbox还有空间，内部flexbox就不应该包裹，而外部flexbox应该收缩

我试着给

.b_row

一个100%的宽度，但是没有用

.m{
显示器：flex；
柔性包装：包装；
}
.l_1{
背景色：红色；
弹性：1；
填充：15px；
左边距：自动；
右边距：自动；
}
r_1先生{
背景颜色：黄色；
弹性：1；
填充：25px；
左边距：自动；
右边距：自动；
}
.b_1{
填充：15px；
边界半径：4px；
}
b_街{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.b_项目{
弹性：1；
}

左文本
项目1


项目2


正确的项目

考虑使用媒体查询来控制内部flex容器的包装行为

与此相反：

.b_row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

试着做以下几点：

.b_row {
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
}

@media ( max-width: 300px ) {
   .b_row { flex-wrap: wrap; }
}

---

这是一个很好的解决方法，但仍然是一个解决方法-我不能相信这在CSS中是不可能的…我不认为这是CSS的技术挑战。这更像是：浏览器如何知道您在不同容器之间包装的首选顺序？从浏览器的角度来看，它是任意的。而且，不同的元素有不同的特征。例如，输入元素具有固有的最小宽度。如果里面有内容呢？然后呢？我不认为我的答案是一个解决办法。这就是媒体查询存在的原因。好吧，如果没有办法告诉浏览器包装的首选顺序，那么CSS就被破坏了，我们必须依靠变通办法——但这并不能改变事实。