Встановіть пріоритет обертання між основними та вкладені контейнери з флексою - html, css, css3, flexbox

Я маю flexbox у форматі flexbox (JSFiddle):

Проблема полягає в тому, що елементи в лівому дільниці починають обертати раніше, ніж це потрібно (ліва дива все ще має місце для стиснення).

Внутрішня гнучка повинна бути обклеєна тільки післязовнішня гнучка формат обертається - поки існує ще місце для зовнішнього 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>

Відповіді:

Подумайте про використання мультимедійного запиту для керування режимом обгортання контейнера внутрішнього гнучкості.

Замість цього:

.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; }
}

перероблена скрипка