.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)不起作用,以及为什么他们的解决方案可以吗?感谢您的帮助。
最佳答案
你的意思是这样的吗?
您必须将 align-items: stretch;
添加到父项而不是元素本身
看看这个css flex guide
将 align-items: stretch;
添加到 .appShopSummaryContainer .appShopSummaryProductWrap
并从 .appShopSummaryContainer 中删除
并将 height: 100%;
。 appShopSummaryInfojustify-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>
关于html - Flex Child Height 不拉伸(stretch)到父级的全高(使用 align-self stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52851095/