子要素の合計の高さの合計が親の高さよりも大きい

Question

この実験では、最初の子は詰め込みによってのみ作成され、2番目の子は親コンテナの残りの領域を満たす必要があります。これを解決するために、calc()関数を使用してみましたが、親要素の高さである100vhを、最初の要素のパディングトップとパディングボトムの合計である6remから減算しました。私が得た結果は、親要素の残りのスペースの高さを超える高さであり、オーバーフローが残っていました。

.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: #dfdfdf; 
 
} 
 

 
.first-box { 
 
    width: 100%; 
 
    padding: 3rem 0; 
 
    background: firebrick; 
 
    color: #dfdfdf; 
 
    font: 1rem 'Arial', Helvetica, sans-serif; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.second-box { 
 
    width: 100%; 
 
    height: calc(100vh - 6rem); 
 
    background: purple; 
 
    color: #dfdfdf; 
 
    font: 1rem 'Arial', Helvetica, sans-serif; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="first-box">This box has no height, only formed by padding</div> 
 
    <div class="second-box">This box must fill the whole container with the remaining offset height of parent</div> 
 
</div>

私はこのような場合には代わりにJavascriptを使用する必要がありますか？ CSSと異なり、Javascriptの要素のオフセットの高さは、高さまたはパディングのみで構成されているかどうかにかかわらず取得できます。

Answer 1

あなたは既にフレックスボックスを使用していますので、コンテナに適用して高さに対応させてください。

また、コンテナにはflex-directionを列に設定する必要があります。次に、2番目のボックスからheightプロパティを削除し、flex: 1 1 auto;を追加します。

私の例では、ベンダーのプレフィックスは追加していません。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: #dfdfdf; 
 
} 
 

 
.first-box { 
 
    width: 100%; 
 
    padding: 3rem 0; 
 
    background: firebrick; 
 
    color: #dfdfdf; 
 
    font: 1rem 'Arial', Helvetica, sans-serif; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.second-box { 
 
    width: 100%; 
 
    background: purple; 
 
    color: #dfdfdf; 
 
    font: 1rem 'Arial', Helvetica, sans-serif; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex: 1 1 auto; 
 
}

<div class="container"> 
 
    <div class="first-box">This box has no height, only formed by padding</div> 
 
    <div class="second-box">This box must fill the whole container with the remaining offset height of parent</div> 
 
</div>