Q:

css display flex broke layout

I'm using flex property for my custom blockquotes, here's demo: 
http://jsfiddle.net/buda9/pumZH/3/
Everything works fine when I use plain text in it. But when I add  or  layout isn't so nice :) I made a temporary fix by using display: block but then my icon in :before pseudo element isn't vertically aligned and I need this icon to be in the middle
blockquote {
    display:flex;
}

Trying to fix this for the last 2 days

A:

Your demo is little confusing, but I can tell you that this is not a good use case for Flexbox layout. It is not intended for things like this one. Better use old methods for this like floats, absolute positioning,etc. You need to wrap your content inside a blockqoute in some block-level box to trigger correct behavior of flexbox layout. 
HERO IS UPDATED DEMO: http://jsfiddle.net/pumZH/4/
Is this what you want ? 

