Lenturkan Tinggi Anak bukan Meregangkan ke Tinggi Penuh Orang Tua (menggunakan align-self stretch)

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

Saya telah melihat beberapa jawaban stackoverflow lain untuk pertanyaan serupa, tetapi tidak ada yang berhasil dalam situasi ini. Tidak yakin mengapa, tetapi div oranye tidak dapat diperluas hingga setinggi induknya.

Menyetel ketinggian ke 100% jelas tidak akan berhasil karena induknya tidak memiliki ketinggian yang tetap, tetapi menyelaraskan dirinya sebagai regangan juga gagal untuk merenggangkan ketinggian.

Jika ada yang bisa mengatasi ini, adakah yang bisa menjelaskan mengapa align stretch tidak berfungsi, dan mengapa solusinya berhasil? Terima kasih atas bantuan apa pun di sini.


html css flexbox
person user8758206    schedule 17.10.2018    source sumber
comment
sepertinya berfungsi dengan menampilkannya sebagai kisi, tetapi masih penasaran untuk mengetahui mengapa flex tidak berfungsi (solusi kisi: codepen.io/anon/pen/NOygmR)   -  person user8758206    schedule 17.10.2018

Jawaban (1)


arrow_upward
2
arrow_downward

Apakah maksud Anda seperti ini?
Anda harus menambahkan align-items: stretch; ke induknya, bukan item itu sendiri
lihat ini panduan fleksibel css

tambahkan align-items: stretch; ke .appShopSummaryContainer .appShopSummaryProductWrap dan hapus height: 100%; dari .appShopSummaryContainer .appShopSummaryInfo dan tambahkan justify-content: center; ke .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="/id#" class="appShopSummaryImg" style="background:url('https://images.pexels.com/photos/982021/pexels-photo-982021.jpeg')"></a>
    <div class="appShopSummaryInfo">
      <h3>Title</h3>
      <a href="/id#" class="appShopSummaryMoreInfoBtn">More Information</a>
    </div>
  </div>
  <!-- ENDFOREACH -->
</div>

person Ado    schedule 17.10.2018