Angular flex-layout falscher Überlauf

Question

Ich möchte Angulars flexLayout verwenden. Das Problem ist, wenn ich versuche, flexible Inhalte zu überfließen, wird es nicht sein. Wenn der Inhalt größer als sein Container ist, "überwächst" er einfach dessen Container.

Ich habe gefunden, aber Intrinsic & Extrinsic Sizing Unterstützung ist in diesem Moment arm.

Hier ist ein Plünderer example. Ich habe min-height prop versucht:

.detail-row-item{ 
    // min-height: min-content; //good solution, but poor browser suport 
} 

Es funktionierte auf Chrom. Gibt es eine andere Lösung, min-height: min-content; Ergebnis zu tun?

Edit: Ich fand heraus, dass dieses Beispiel, funktioniert gut auf Firefox und Edge nur Chrom hat ein Problem, wie auf Screenshot gezeigt.

Answer 1

Wenn Sie die Höhe der div Elemente und deren Inhalt überläuft ihrer Größe zu beschränken, können Sie die CSS overflow property verwenden das Verhalten anzupassen. Wenn Sie also overflow: auto; oder overflow: hidden; zu Ihrer Klassendefinition hinzufügen, erhalten die Karten Bildlaufleisten oder verstecken einfach die übergelaufenen Texte.

Edit:

Um das gleiche Ergebnis wie bei min-height: min-content zu erreichen, entfernen Sie einfach das Flex-Attribut des div.detail-content-wrapper Element und legen Sie die folgenden:

.detail-content-wrapper { 
    max-height: 50%; 
    overflow: auto; 
} 

Sie können die modified plunker überprüfen.

Answer 2

Fügen Sie das unten in Ihrer CSS-Datei hinzu.

.card-wrapper.detail-card { 
    overflow: auto; 
}