SVG in flexbox vermasselt die Höhe anderer Elemente
Ich versuche, ein SVG-Element zu verwenden, das mit der Containergröße in einer Flexbox skaliert, aber aus irgendeinem Grund vermasselt es die Größe eines div (mit Text) unterhalb der SVG. (Wie viel ändert sich, wenn Sie die Größe des Browserfensters ändern)
Hier sind die grundlegenden CSS-Eigenschaften, die ich für all das verwende:
%Vor%HTML:
%Vor%Codepen: Ссылка
Wie kann ich die Größe bei der Verwendung eines SVG beheben?
1 Antwort
Ihr Problem mit der flex-box tritt bei der Verwendung der Kurzschrift-Eigenschaft flex auf. Sie setzen es auf: flex: 1 1 auto , was bedeutet: flex-grow: 1; flex-shrink: 1; flex-basis: auto; .
Sie möchten nicht, dass der Container mit dem Inhalt text verkleinert wird. Sie müssen nur flex-shrink: 0; auf diesen Knoten setzen.
Hier ist Ihre gespaltene Demo: Ссылка
Nebenbei bemerkt:
Meiner Meinung nach ist es in html5 immer noch illegal, neue Attribute zu erfinden. Dies ist nicht der Grund für das Scheitern, aber vielleicht wäre es besser, data-attributes