ottogal: Leeres Flex-Item soll nicht angezeigt werden

problematische Seite

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

  1. problematische Seite

    @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

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

      1. problematische Seite

        @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. problematische Seite

          @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. problematische Seite

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

  2. problematische Seite

    @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. problematische Seite

      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.