[解決済み] フレックスボックス内のSVGが他の要素の高さを狂わせる

質問

フレックスボックスでコンテナサイズに合わせてリサイズするsvg要素を使おうとしているのですが、なぜかsvgの下のdiv（テキスト入り）のサイズがぐちゃぐちゃになるんですよね。(ブラウザのウィンドウサイズを変更するとどの程度変わるのか）。

以下は、これら全てに使用している基本的なCSSプロパティです。

[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>

コードペン http://codepen.io/anon/pen/rVJepm

SVGを使用した場合のサイジングを修正するにはどうすればよいですか？

どのように解決するのですか？

フレックスボックスの問題点は flex ショートハンドプロパティです。これを設定すると flex: 1 1 auto という意味になります。 flex-grow: 1; flex-shrink: 1; flex-basis: auto; .

コンテナにコンテンツを持たせたくないので テキスト を縮小することができます。を設定するだけです。 flex-shrink: 0; をこのノードに追加します。 フォークしたデモはこちらです。 http://codepen.io/anon/pen/GJQqog

余談ですが 私見ですが、html5では新しい属性を作り上げることはまだ違法だと思います。失敗の原因ではありませんが、もしかしたら、このまま data-attributes .