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％显然不起作用，因为父级没有固定的高度，但是将自身对齐为拉伸也无法拉伸该高度。

如果任何人都可以解决此问题，有人可以解释为什么对齐拉伸无法正常工作，为什么他们的解决方案可以正常工作？感谢您的帮助。

Answer 1

您的意思是这样的吗？
您必须向父级添加align-items: stretch;而不是项目本身
查看此css flex guide

将align-items: stretch;添加到.appShopSummaryContainer .appShopSummaryProductWrap并从height: 100%;中删除.appShopSummaryContainer .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>

弯曲孩子的身高不伸展到父母的全高（使用“自我对齐”伸展）

1 个答案: