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

Question

我有一个flexbox within a flexbox (JSFiddle)：

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

内部的弹性盒应该只在外部的弹性盒包裹之后才包裹——只要外部的弹性盒还有空间，内部的弹性盒就不应该包裹，而外部的弹性盒应该收缩。

我尝试为.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; }
}

revised fiddle