Safari/Chrome: Height of overflow-hidden item in flex item in absolute flexbox container

I have following simple HTML snippet which has different result in Chrome and Safari

<body>
  <div id="1" style="position: absolute; display: flex; flex-direction: column; /* height: 78px; */">
    <div id="2" style="height: 100%; display: flex; flex-direction: column;">
      <div id="3" style="position: relative; overflow: hidden;">
        <p><span>CSS</span></p>
      </div>
    </div>
</div>

The content is shown perfectly in Chrome while in Safari, #3 height is 0. But if I do one of following

Set an explicit height to #1
Remove height: 100% on #2
Remove overflow:hidden on #3
remove disaplay:flex on #1 or #2

then the height of all elements are calculated correctly in Safari.

philipwalton / flexbugs

Safari/Chrome: Height of overflow-hidden item in flex item in absolute flexbox container #198