Flexbox 中的 SVG 会扰乱其他元素的高度

我正在尝试使用一个 svg 元素，它可以根据 Flexbox 中的容器大小调整大小，但由于某种原因，它会弄乱 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>

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

使用 SVG 时如何修复大小？

你的弹性盒问题出现在使用flex速记属性。您将其设置为：flex: 1 1 auto， 意思是：flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

因为您不希望容器包含内容text缩小。你只需设置flex-shrink: 0;到这个节点。 这是你的分叉演示：http://codepen.io/anon/pen/GJQqog http://codepen.io/anon/pen/GJQqog

附注： 我认为在html5中构造新属性仍然是非法的。这不是失败的原因，但也许这样做会更好data-attributes https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes.