在不应该的时候灵活地包装儿童;弹性包装：无包装不起作用

Question

不知道为什么，但flex-flow: row nowrap似乎并没有阻止橙色div的包装。绿色和橙色的div应该并排 - 我在这里做错了什么？橙色的div似乎也没有高度。

任何帮助将不胜感激，谢谢。

.appShopSummaryContainer {
	display: flex;
	flex-flow: column wrap;
}
.appShopSummaryProductWrap {
flex-basis: 100%;
width: 100%;
background: pink;
flex-flow: row nowrap;
display: flex;
}
.appShopSummaryImg {
	flex-basis: 40%; /* flex: 0 0 40% */
width: 40%;
	height: auto;
	padding-bottom: 26.667%;
background: green;
}
.appShopSummaryInfo {
flex-basis: 60%; /* flex: 0 0 60% */
width: 60%;
background: orange;
height: 100%;
}

<div class='appShopSummaryContainer'>
<div class='appShopSummaryProductWrap'>
<a href='#'><div class='appShopSummaryImg'></div>erg</a>
<div class='appShopSummaryInfo'>wgh</div>
</div>

<div class='appShopSummaryProductWrap'>
<a href='#'><div class='appShopSummaryImg'></div>jyu</a>
<div class='appShopSummaryInfo'>erge</div>
</div>
</div>

Answer 1

你可以试试这段代码

<div class="appShopSummaryContainer">
<div class="appShopSummaryProductWrap">
<a href=""class="appShopSummaryImg"></a>
<div class="appShopSummaryInfo"></div>
</div>
</div>
</br>
<div class='appShopSummaryContainer'>
<div class='appShopSummaryProductWrap'>
<a href='#'class='appShopSummaryImg' ><div>test</div></a>
<div class='appShopSummaryInfo'>test1</div>
</div>
</div>

CSS 去这里

.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height:100%;
width:100%;
display: flex;
flex-flow: row nowrap;
}
.appShopSummaryImg {
flex-basis: 40%; /* flex: 0 0 40% */
width: 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
}
.appShopSummaryInfo {
flex-basis: 60%; /* flex: 0 0 60% */
width: 60%;
background: orange;
padding-bottom: 26.667%;
height: 100%;
}