flexbox中的SVG会混淆其他元素的高度

我试图使用svg元素来调整flexbox中的容器大小，但由于某种原因它会混淆svg下面的div（包含文本）的大小。（如何太大的变化，当你调整浏览器窗口）flexbox中的SVG会混淆其他元素的高度

example

下面是我用这一切的基本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

如何在使用SVG时修复大小？

来源

2015-07-01 Staeff

您的弹性盒问题出现在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。

来源

2015-07-01 11:06:14

它只是一个非常简化的角度/ material.angular网站演示，只是为了解释为什么我使用非'数据属性'。但无论如何感谢！ – Staeff

哈哈非法。编码警察会用那个伙伴来敲门。 – MaxwellLynn

我好奇@MaxwellLynn。上述css中的非法任务在哪里？ –

flexbox中的SVG会混淆其他元素的高度

回答

相关问题