Flex子項具有不同的高度

Question

我試圖讓flex項目（橙色div和圖片div）具有相同的高度。 設置100％的高度沒有任何區別，當您縮小瀏覽器窗口時，最終橙色div變得比圖片div高。

知道我哪里錯了嗎？ 我認為彈性兒童通常具有相同的高度。

感謝您的幫助。

 .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; height: 100%; display: flex; flex-flow: column wrap; align-items: flex-start; } .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://cml.sad.ukrd.com/image/394545.jpg')"></a> <div class="appShopSummaryInfo"> <h3>title here...</h3> <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a> </div> </div> <!-- ENDFOREACH --> </div> 

Answer 1

這是因為您已將項目與中心對齊，從appShopSummaryProductWrap和您的height:100%刪除它height:100%來自appShopSummaryInfo ，它將起作用：

 .appShopSummaryContainer .appShopSummaryProductWrap { background: pink; width: 100%; display: flex; flex-wrap:nowrap; } .appShopSummaryContainer .appShopSummaryImg { display:block; width:40%; padding-bottom: 26.667%; background: green; background-size: cover !important; background-position: center center !important; } .appShopSummaryContainer .appShopSummaryInfo { flex-grow:1; background: orange; display: flex; flex-flow: column wrap; align-items: flex-start; } .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://cml.sad.ukrd.com/image/394545.jpg')"></a> <div class="appShopSummaryInfo"> <h3>title here...</h3> <a href="#" class="appShopSummaryMoreInfoBtn">More Information</a> </div> </div> <!-- ENDFOREACH --> </div> 

Answer 2

嘗試刪除此類.appShopSummaryContainer .appShopSummaryProductWrap align-items ，以及.appShopSummaryContainer .appShopSummaryInfo height remove

Answer 3

幾件事;

• 在css中，為您的類使用連字符而不是camelCasing是正常的。
• 如果你在style屬性中使用background ，你必須在css中使用！important。 如果您使用background-image ，則不會。
• 您使用了列，而這是一行。
• Flex項目需要一個高度的容器。

 .appShopSummaryContainer { display: flex; flex-flow: row wrap; } .appShopSummaryContainer .appShopSummaryProductWrap { flex-basis: 100%; background: pink; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; } .appShopSummaryContainer .appShopSummaryImg { flex: 0 0 40%; height: 100%; background: green; background-size: cover; background-position: center; } .appShopSummaryContainer .appShopSummaryInfo { flex: 0 0 60%; background: orange; height: 100%; display: flex; flex-flow: column wrap; align-items: flex-start; } .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-image: url('http://www.dieren-en-planten.nl/wp-content/uploads/2015/08/800px-Meerkat_feb_09.jpg')"></a> <div class="appShopSummaryInfo"> <h3>title here...</h3> <a href="#" class="appShopSummaryMoreInfoBtn" >More Information</a> </div> </div> <!-- ENDFOREACH --> </div>