SVG in flexbox vermasselt die Höhe anderer Elemente

Question

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, wenn Sie die Größe des Browser-Fenster)

Hier sind die grundlegenden CSS-Eigenschaften Ich bin für all dies mit:

[layout] { 
    box-sizing: border-box; 
    display: flex; 
} 

[layout=column] { 
    flex-direction: column; 
} 

[layout=row] { 
    flex-direction: row; 
} 

[flex] { 
    box-sizing: border-box; 
    flex: 1; 
} 

HTML:

<div class="content" style="height: 100%;" layout="row"> 

    <div class="card" layout="column" flex> 
     <div class="toolbar" layout="column"> 
      <span>Test</span> 
     </div> 

     <div class="card-content" layout="column" flex> 
      <div layout="column" flex> 
       <div layout="column" flex> 
        <div layout="column" flex 
         style="background:green;"> 
         <svg viewBox="0 0 50 50"> 
          <circle r="25" cx="25" cy="25"> 
         </svg> 
        </div> 
       </div> 
       <div>Text</div> 
      </div> 
     </div> 
    </div> 
</div> 

Codepen:http://codepen.io/anon/pen/rVJepm

Wie kann ich die Größe bei Verwendung eines SVG beheben?

Answer 1

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

Da der Inhalt Text nicht schrumpfen soll. Sie müssen nur flex-shrink: 0; auf diesen Knoten setzen. Hier ist Ihre gegabelt Demo: http://codepen.io/anon/pen/GJQqog

Auf einer seitlichen Anmerkung: Meiner Meinung nach illegal es ist immer noch in html5 neue Attribute zu bilden. Dies ist nicht der Grund für den Fehler, aber vielleicht wäre es besser, für data-attributes gehen.