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

css, flexbox, html, safari

Solution

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

Problem

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.

Original source