ความสูงของเด็กแบบยืดหยุ่นไม่ยืดจนเต็มความสูงของผู้ปกครอง (ใช้การยืดแบบปรับแนวเอง)

.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="/th#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>
    <div class="appShopSummaryInfo">
      <h3>Title</h3>
      <a href="/th#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

ฉันได้ดูคำตอบของ stackoverflow อื่น ๆ สำหรับคำถามที่คล้ายกัน แต่ไม่มีผู้ใดทำงานในสถานการณ์นี้ ไม่แน่ใจว่าทำไม แต่ไม่สามารถให้ div สีส้มขยายจนเต็มความสูงของพาเรนต์ได้

แน่นอนว่าการตั้งค่าความสูงเป็น 100% จะไม่ทำงานเนื่องจากพาเรนต์ไม่มีความสูงคงที่ แต่การจัดแนวตัวเองเมื่อยืดออกก็ไม่สามารถยืดความสูงได้เช่นกัน

หากใครสามารถแก้ปัญหานี้ได้ ใครช่วยอธิบายหน่อยว่าทำไมการยืดการจัดแนวจึงไม่ได้ผล และเหตุใดวิธีแก้ปัญหาของพวกเขาถึงได้ผล ขอบคุณสำหรับความช่วยเหลือที่นี่


html css flexbox
person user8758206    schedule 17.10.2018    source แหล่งที่มา
comment
ดูเหมือนว่าจะใช้งานได้กับการแสดงเป็นตาราง แต่ยังอยากรู้ว่าเหตุใดเฟล็กซ์จึงไม่ทำงาน (โซลูชันกริด: codepen.io/anon/pen/NOygmR)   -  person user8758206    schedule 17.10.2018

คำตอบ (1)


arrow_upward
2
arrow_downward

คุณหมายถึงอะไรแบบนี้ใช่ไหม
คุณต้องเพิ่ม align-items: stretch; ไปยังพาเรนต์ไม่ใช่รายการนั้น
ลองดู คำแนะนำ CSS Flex

เพิ่ม 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="/th#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>
    <div class="appShopSummaryInfo">
      <h3>Title</h3>
      <a href="/th#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

person Ado    schedule 17.10.2018