Согните детскую упаковку, когда она не должна;flex-wrap: nowrap не работает

Question

Понятия не имею почему, но, похоже, flex-flow: row nowrap не препятствует переносу оранжевого 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%;
}