Nested flexbox not working in Safari 10.1.2

I have some nested flexbox layouts which work perfectly in Chrome & Safari 11+, but behaves incorrectly in Safari 10.1.2

In Chrome - it looks as expected:

Chrome behaviour

However in Safari 10.1.2:

Safari behaviour

Could someone help me figure out how to fix? Thanks!

Here's my (slightly simplified) HTML:

<div class="content-canvas"><div class="horizontal-section" id="blog"><h1>Blog</h1><div id="divRss"><ul class="feedEkList"><li><div class="itemTitle"><a href="#</a></div><div class="itemDate">10/16/2017</div><div class="itemContent">Some text</div></li><li>                   As above</li></ul></div><a href="##" target="_blank">Read more</a></div><div class="horizontal-section" id="upcoming">    ...</div></div>

And my CSS:

.content-canvas {    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-flex-grow: 2;    -moz-flex-grow: 2;    -ms-flex-grow: 2;    -o-flex-grow: 2;    flex-grow: 2;}#blog,{    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-flex-direction: column;    -moz-flex-direction: column;    -ms-flex-direction: column;    -o-flex-direction: column;    flex-direction: column;    -webkit-justify-content: space-between;    -moz-justify-content: space-between;    -ms-justify-content: space-between;    -o-justify-content: space-between;    justify-content: space-between; }#divRss,{    padding: 10px;    height: 0;    -webkit-flex-grow: 2;    -moz-flex-grow: 2;    -ms-flex-grow: 2;    -o-flex-grow: 2;    flex-grow: 2;}.feedEkList,{    width: 100%;    height: 100%;    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-flex-direction: column;    -moz-flex-direction: column;    -ms-flex-direction: column;    -o-flex-direction: column;    flex-direction: column;    -webkit-justify-content: space-around;    -moz-justify-content: space-around;    -ms-justify-content: space-around;    -o-justify-content: space-around;    justify-content: space-around;}.feedEkList li, {    height: 0;    -webkit-flex-grow: 1;    -moz-flex-grow: 1;    -ms-flex-grow: 1;    -o-flex-grow: 1;    flex-grow: 1;}