एसवीजी अन्य तत्वों की ऊंचाई को खराब करता

Question

मैं एक svg तत्व है कि एक flexbox में कंटेनर के आकार के साथ आकार बदलता है उपयोग करने के लिए svg नीचे कोशिश कर रहा हूँ, लेकिन किसी कारण से यह (पाठ) के साथ एक div के आकार को खराब करता । (कितना परिवर्तन जब आप ब्राउज़र विंडो का आकार बदलने)

यहाँ बुनियादी सीएसएस गुण मैं इस सब के लिए उपयोग कर रहा हूँ कर रहे हैं:

[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

एसवीजी का उपयोग करते समय मैं आकार को कैसे ठीक कर सकता हूं?

Answer 1

फ्लेक्स-बॉक्स के साथ आपकी समस्या flex आशुलिपि संपत्ति के उपयोग में पैदा होती है। आप इसे सेट करते हैं: flex: 1 1 auto, जिसका अर्थ है: flex-grow: 1; flex-shrink: 1; flex-basis: auto;।

जैसा कि आप नहीं चाहते हैं कि कंटेनर सामग्री टेक्स्ट संक्षिप्त करें। आपको केवल इस नोड में flex-shrink: 0; सेट करना होगा। http://codepen.io/anon/pen/GJQqog

एक तरफ ध्यान दें पर:: मेरी राय में यह अभी भी एचटीएमएल 5 नई विशेषताओं बनाने के लिए में गैरकानूनी है यहाँ अपने काँटेदार डेमो है। यह विफलता का कारण नहीं है, लेकिन शायद data-attributes के लिए जाना बेहतर होगा।