大家好，
想請問大家，為了使子元件的高度能填滿整個頁面的高度，
所以設定如下。section 跟 .outside 的高度，可以正常填滿整個頁面。
但是 .inside 卻無法，它只會維持在自己高度，height:100% 沒有作用。
這是為什麼?
<section>
<h2></h2>
<div class="outside">
<div class="inside">a</div>
</div>
</section>
section{
display:flex;
flex-direction: column;
min-height: 100vh;
}
.outside{
width:100%;
flex: 1 1 0%;
padding: 20px;
}
.inside{
width:100%;
height:100%;
}
已邀請的邦友 {{ invite_list.length }}/5
這是因為你並沒有設定明確的高度，只有寫min-height: 100vh;
再來outside會有高度是因為你下了flex: 1，當有剩下的空間，flex item就會自己變高，可是實際上它並沒有被套用高度，inside也就一樣吃不到高度。
iThome鐵人賽
看影片追技術