html - Flex Child Height 不拉伸(stretch)到父级的全高(使用 align-self stretch)

Question

.appShopSummaryContainer {
  display: flex;
  flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
  flex-basis: 100%;
  background: pink;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
  flex: 0 0 40%;
  height: auto;
  padding-bottom: 26.667%;
  background: green;
  background-size: cover !important;
  background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
  flex: 0 0 60%;
  background: orange;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  height: 100%; /* not working */
  /* doesn't work: align-self: stretch; */
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
  cursor: pointer;
  background: #214291;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

<div class="appShopSummaryContainer">
  <!-- FOR EACH THING DO THIS -->
  <div class="appShopSummaryProductWrap">
    <a href="#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>
    <div class="appShopSummaryInfo">
      <h3>Title</h3>
      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

我看过一些类似问题的其他 stackoverflow 答案，但在这种情况下都不起作用。不知道为什么，但无法让橙色 div 扩展到其父级的全高。

将高度设置为 100% 显然是行不通的，因为父级没有固定的高度，但将自身对齐为 stretch 也无法拉伸(stretch)高度。

如果有人可以解决这个问题，有人可以解释为什么对齐拉伸(stretch)不起作用，以及为什么他们的解决方案可以吗？感谢您的帮助。

Answer 1

你的意思是这样的吗？
您必须将 align-items: stretch; 添加到父项而不是元素本身
看看这个css flex guide

将 align-items: stretch; 添加到 .appShopSummaryContainer .appShopSummaryProductWrap 并从 .appShopSummaryContainer 中删除 height: 100%;。 appShopSummaryInfo 并将 justify-content: center; 添加到 .appShopSummaryContainer .appShopSummaryInfo

.appShopSummaryContainer {
  display: flex;
  flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
  flex-basis: 100%;
  background: pink;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}
.appShopSummaryContainer .appShopSummaryImg {
  flex: 0 0 40%;
  height: auto;
  padding-bottom: 26.667%;
  background: green;
  background-size: cover !important;
  background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
  flex: 0 0 60%;
  background: orange;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: center;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
  cursor: pointer;
  background: #214291;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

<div class="appShopSummaryContainer">
  <!-- FOR EACH THING DO THIS -->
  <div class="appShopSummaryProductWrap">
    <a href="#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>
    <div class="appShopSummaryInfo">
      <h3>Title</h3>
      <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>