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

Question

我在弹性盒（JSFiddle）中有一个弹性盒：

问题是左侧 div 中的项目比必要的更早开始换行（左侧 div 仍有收缩空间）。

内部 Flexbox 只能在外部 Flexbox 包裹后才包裹 - 只要外部 Flexbox 仍有空间，内部 Flexbox 就不应该包裹，而外部 Flexbox 应该收缩。

我尝试将.b_row宽度设置为 100%，但没有成功。

.m {
  display: flex;
  flex-wrap: wrap;
}
.l_1 {
  background-color: red;
  flex: 1;
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
}
.r_1 {
  background-color: yellow;
  flex: 1;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;
}
.b_1 {
  padding: 15px;
  border-radius: 4px;
}
.b_row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.b_item {
  flex: 1;
}

<div class=m>
  <div class=l_1>
    <div class=b_1>
      Left text
      <div class=b_row>
        <div class=b_item>Item 1
          <br>
          <input class=datepicker type=text size=10>
        </div>
        <div class=b_item>Item 2
          <br>
          <input class=datepicker type=text size=10>
        </div>
      </div>
    </div>
   </div>
  <div class=r_1>Right Item</div>
</div>

Answer 1

考虑使用媒体查询来控制内部 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; }
}

修改后的小提琴