Safari issue with justify-content: flex-end; align-items: flex-end;

Question

I am designing a messenger layout and I am struggling to fix few things on Safari as it seems a compatibility issues.

http://animgram.com/fb/index.html If you open this link on Google Chrome and Safari. Google Chrome is the correct view but on Safari it is not showing correctly.

I am struggling to set this class.

.self {
justify-content: flex-end;
align-items: flex-end;
}

Please Note: only Safari is the problem. IE, Chrome and Firefox are perfectly OK.

Answer 1

Safari < 7.0 only has an implementation of the old 2009 Flexbox specification, which is very different from the modern specification:

.foo {
    display: -webkit-box;
    -webkit-box-pack: start; /* justify-content */
    -webkit-box-align: start; /* align-items */
}

This might be helpful: https://gist.github.com/cimmanon/727c9d558b374d27c5b6