Nested flexbox not working in Safari 10.1.2 - css

Question

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>
Read more
</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;
}

Answer 1

I personally had a problem on Safari when the content of my upper flexbox was more than 100% of its height, in which case the nested flexbox had its height shrunk to 1px.
I fixed it by setting flexbox-shrink: 0 on nested flexbox.