Flexbox Kinder Kinder Überlauf

Question

Die Kinder meiner Flex Box haben Kinder selbst, für eines dieser Kinder (verwende ich die object-fit:cover, um sicherzustellen, dass alle Bildkacheln die gleiche Höhe/Breite haben).

Das Problem ist, dass das zweite Kind (<h4> Tag) nicht in der Flex Box enthalten ist und scheint zu überlaufen.

Meine bisherigen Bemühungen haben dazu geführt, dass die <h4> Tag-Anpassung, aber die object-fit: cover aufhören zu arbeiten.

Ist das möglich?

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 
span.image-tile>img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>

Beim Antworten könnten Sie bitte eine Erklärung geben, warum es auftritt auf diese Weise, so kann ich es verstehen, eher dann korrigiert es einfach: 'P

Answer 1

Wenn Sie ein Element sagen height: 100% zu sein, nimmt es die volle Höhe des Behälters. Dadurch bleibt für Geschwister kein Platz mehr. Deshalb wird die h4 außerhalb des Containers gerendert.

Eine einfache Lösung besteht darin, das Kind des Flex-Containers (.image-tile) auch zu einem flexiblen Container zu machen.

Dann werden die Kinder (das Bild und die Überschrift) flex Elemente. Mit flex-direction: column stapeln sie sich vertikal.

Da die Grundeinstellungen auf Flex-Artikeln sind flex-shrink: 1 und flex-wrap: nowrap, wird das Bild mit height: 100% erlaubt, um zu schrumpfen für alle Elemente im Innern des Behälters passen.

Sie müssen dann die Standardeinstellung für die minimale Mindesthöhe (min-height: auto) überschreiben, damit das Bild und die Überschrift in den Container passen.Weitere Details hier:

• Why doesn't flex item shrink past content size?

Auch als eine Randnotiz, wenn Sie Prozent Margen verwenden werden (oder Padding) in einem flexiblen Behälter, bedenken Sie:

• Why doesn't percentage padding/margin work on flex items in Firefox?

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    display: flex;   /* new */ 
 
    flex-direction: column; /* new */ 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 

 
span.image-tile > img { 
 
    min-height: 0;   /* new */ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

Bildhöhe 100% schafft Problem, weil 100% Höhe durch das Bild selbst aufgrund der Flex-Eigenschaft des Elternteils belegt ist, da Flex die Höhe des Kindes auf 100% erhöht. Deshalb geht der Titel vom Elternteil weg.

Also wenn Sie es perfekt machen möchten, fügen Sie einige Pixel Höhe im Bild wie 300px oder etwas nach Ihrem Design.

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 
span.image-tile>img{ 
 
    width: 100%; 
 
    height: 200px; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>