flexbox中的SVG会混淆其他元素的高度 [英] SVG in flexbox messes up height of other elements
问题描述
我正在尝试使用一个svg元素,该元素在flexbox中使用容器大小调整大小,但由于某种原因,它会混淆svg下面的div(带文本)的大小。 (调整浏览器窗口大小时会发生多少变化)
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)
以下是我用于所有这些的基本css属性:
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
我该如何修复使用SVG时的大小调整?
How can I fix the sizing when using a SVG?
推荐答案
使用 flex时出现flex-box的问题
速记属性。您将其设置为: flex:1 1 auto
,表示: flex-grow:1; flex-shrink:1; flex-basis:auto;
。
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;
.
因为您不希望具有内容 text 的容器缩小。您只需将 flex-shrink:0;
设置为此节点。
以下是您的分叉演示: http://codepen.io/anon/pen/GJQqog
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
在旁注:
在我看来,在html5中构建新属性仍然是非法的。这不是失败的原因,但也许最好去 data-attributes
。
这篇关于flexbox中的SVG会混淆其他元素的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!