Set wrapping priority between primary and nested flex containers

Question

I have a flexbox within a flexbox (JSFiddle):

The problem is that the items in the left div start to wrap earlier than necessary (the left div still has room to shrink).

The inner flexbox should only wrap after the outer flexbox has wrapped - as long as there is still space for the outer flexbox, the inner flexbox should not wrap and the outer flexbox should shrink, instead.

I tried to give .b_row a width of 100%, but that didn't work.

.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

You can control the wrapping behaviour using flex-basis in the inner elements.

(Solution without media queries)

.outer {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px red;
  padding: 10px;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px blue;
  padding: 10px;
  flex-basis: 200px;
  flex-grow: 1;
}

.left {
  flex-basis: 100px;
  flex-grow: 1;
}

#right {
  flex-basis: 100px;
  flex-grow: 1;
  border: solid 1px green;
}

#o1 {
  width: 400px;
}

#o2 {
  width: 300px;
}

#o3 {
  width: 200px;
}

<div class="outer" id="o1">
  <div class="inner">
    <div class="left">Left 1</div>
    <div class="left">Left 2</div>
  </div>
  <div id="right">Right</div>
</div>

<div class="outer" id="o2">
  <div class="inner">
    <div class="left">Left 1</div>
    <div class="left">Left 2</div>
  </div>
  <div id="right">Right</div>
</div>

<div class="outer" id="o3">
  <div class="inner">
    <div class="left">Left 1</div>
    <div class="left">Left 2</div>
  </div>
  <div id="right">Right</div>
</div>