Summe der Summe der untergeordneten Elemente ist größer als die Höhe des übergeordneten Elements

Question

In diesem Experiment wird das erste untergeordnete Element nur durch Auffüllen gebildet, während das zweite untergeordnete Element den verbleibenden Bereich des übergeordneten Elements ausfüllen muss. Um dies zu lösen, habe ich versucht, mit der calc() Funktion, ich 100vh, die die Höhe des Elternelements ist, durch die Gesamtsumme von padding-top und padding-bottom des ersten Elements, die ist. Das Ergebnis, das ich erhielt, war eine Höhe, die die Höhe des verbleibenden Raums des Elternelements überstieg und einen Überlauf hinterließ.

.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>

Sollte ich Javascript statt in einem Fall wie diesem? Denn anders als in CSS können Sie die Versatzhöhe eines Elements in Javascript ermitteln, egal ob es nur durch Höhe oder durch Auffüllen gebildet wird.

Answer 1

Sie verwenden bereits flexbox, wenden Sie das also an Ihren Container an und lassen Sie sich mit der Höhe befassen.

Ihr Container muss auch flex-direction auf Spalte gesetzt werden. Entfernen Sie dann die Eigenschaft height von Ihrer zweiten Box und fügen Sie flex: 1 1 auto; hinzu.

Beachten Sie, dass ich in meinem Beispiel keine Lieferantenpräfixe hinzugefügt habe.

.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>