SVG in flexbox messes up height of other elements

Question

I'm trying to use a svg element that resizes with the container size in a flexbox, but for some reason it messes up the size of a div (with text) below the svg. (How much changes when you resize the browser window)

Here are the basic css properties I'm using for all this:

[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

How can I fix the sizing when using a SVG?

Answer 1

Your problem with flex-box arises in the usage of the flex shorthand property. You set it to: flex: 1 1 auto, which means: flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

As you don't want the container having the content text to shrink. You only have to set flex-shrink: 0; to this node. Here is your forked demo: http://codepen.io/anon/pen/GJQqog

On a side note: In my opinion it's still illegal in html5 to make up new attributes. This is not the reason for the failure, but maybe it would be better to go for data-attributes.