我有flexbox within a flexbox (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>
&#13;
答案 0 :(得分:0)
考虑使用媒体查询来控制内部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; }
}