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 chang

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.