SVG in flexbox vermasselt Höhe von anderen Elementen
Ich versuche, ein svg-element, dass die Größe mit der container-Größe in einer flexbox, aber für einige Grund es vermasselt die Größe eines div (mit text) unterhalb des svg. (Wie viel ändert sich beim ändern der Größe des browser-Fensters)
Hier sind die grundlegenden css-Eigenschaften ich bin für all dies:
[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 das beheben die Dimensionierung bei Verwendung eines SVG?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihr problem mit flex-box entsteht in der Nutzung der
flex
Kurzschrift-Eigenschaft. Legen Sie es auf:flex: 1 1 auto
, was bedeutet:flex-grow: 1; flex-shrink: 1; flex-basis: auto;
.Als Sie nicht wollen, dass der container mit dem Inhalt text zu schrumpfen. Sie haben nur zu setzen
flex-shrink: 0;
zu diesem Knoten.Hier ist Ihre Gabel demo: http://codepen.io/anon/pen/GJQqog
On a side note:
Meiner Meinung nach ist es immer noch illegal in html5 zu machen, neue Attribute. Ist dies nicht der Grund für den Fehler, aber vielleicht wäre es besser zu gehen für
data-Attribute
.data-attributes
. aber trotzdem danke!