HTMLの100％の高さのブロックが複数ある場合

Question

パーセンテージベースの高さを使用するには、親要素を固定高さに設定する必要があることを理解していますか？例：500px

divの階層があるグリッドを構築しています。親は500pxの固定高さで、子供はそれぞれ33.333％の高さです。これらの子供たちは子供のセットを持っています。それぞれの子供は親の100％の高さのパーセンテージを与えたいと思っています。

これを回避する方法はありますか？

Answer 1

これを回避する方法を知っている人はいますか？

別の方法は、子どもたちが自分の親

* {margin:0;} 
 
section { 
 
    height: 100vh; 
 
} 
 
section,div { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
div,p { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
} 
 
p { 
 
    background: #eee; 
 
} 
 
div:nth-child(even) p { 
 
    background: #ccc; 
 
}

<section> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
</section>