Leeres Flex-Item soll nicht angezeigt werden

[ottogal]

Hallo in die Runde,

in dem verlinkten Codepen will ich, dass das rechts liegende aside-Element nicht dargestellt wird, wenn es leer ist.

Die Pseudo-Klasse :empty tut das, aber nur, wenn sich zwischen <aside> und </aside> nicht mal Whitespace befindet. (Die Pseudo-Klasse :blank hätte das Problem nicht, wird aber von so gut wie keinem Browser unterstützt.)

Meine Frage: Lässt sich das Gewünschte mit geeigneten Werten für die flex-Eigenschaft auch erreichen? (Meine Versuche hatten keinen Erfolg.)

Schon mal Dank für Hinweise. ottogal

[Gunnar Bittersmann]

@@ottogal

in dem verlinkten Codepen will ich, dass das rechts liegende aside-Element nicht dargestellt wird, wenn es leer ist.

#b { max-width: max-content }

In manchen Browsern noch mit Präfix; in Edge ab Umstellung auf Chromium. [Can I use]

Sieht bloß blöd aus bei wenig Inhalt (weniger als eine Zeilenlänge).

LLAP 🖖

[ottogal]

#b { max-width: max-content }

In manchen Browsern noch mit Präfix; in Edge ab Umstellung auf Chromium. [Can I use]

Gemäß Can I use soll der aktuelle Firefox es können - tuts aber auch nur ohne Whitespace zwischen Start- und End-Tag.

Sieht bloß blöd aus bei wenig Inhalt (weniger als eine Zeilenlänge).

? Das sieht bei mir ok aus (im Firefox).

[Gunnar Bittersmann]

@@ottogal

#b { max-width: max-content } Gemäß Can I use soll der aktuelle Firefox es können - tuts aber auch nur ohne Whitespace zwischen Start- und End-Tag.

?? Vorhin ging’s. Hast du in der Zwischenzeit was an deinem Pen geändert?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

#b { max-width: max-content } Gemäß Can I use soll der aktuelle Firefox es können - tuts aber auch nur ohne Whitespace zwischen Start- und End-Tag.

?? Vorhin ging’s. Hast du in der Zwischenzeit was an deinem Pen geändert?

Geht auch immer noch. ☞ Fork von deinem Pen, #b { max-width: max-content } ergänzt

Wir reden vom aktuellen Firefox, d.h. vom 67er?

LLAP 🖖

[ottogal]

@Gunnar Bittersmann Sorry für die erzeugte Irritation:

Ich kann (unter Windows 64 bit) deine Beobachtungen für den aktuellen Firefox 67.0 bestätigen; gleiches Verhalten auch mit der Firefox Developer Edition 68.0b5.

Nicht funktioniert hat es bei mir mit dem Waterfox 56.2.10 – den hatte ich mir neulich mal aus Ärger installiert, als der Firefox beim Upgrade plötzlich manche Add-ons nicht mehr mochte...

Das blöde Aussehen bei ganz kurzem Inhalt lässt sich mit #b { min-width: 20% } vermeiden. Edit: Ich dachte eigentlich, das würde durch #b { flex: 1 1 20% } geschehen.

Danke für deine Zeit.

[Gunnar Bittersmann]

@@ottogal

Die Pseudo-Klasse :empty tut das, aber nur, wenn sich zwischen <aside> und </aside> nicht mal Whitespace befindet.

Warum ist denn da Whitespace drin?

LLAP 🖖

[ottogal]

Warum ist denn da Whitespace drin?

Weil es sich um Code in einem CMS handelt, steht da ein interner Platzhalter drin; den kann ich nicht wie Whitespace einfach rausnehmen.