Web Inconsistency: In some cases, text is unexpectedly collapsed

As shown below, I have a couple of lines of text placed within some nodes which set flexGrow/flexShrink. One of the lines is unexpectedly invisible. Sorry I don't have a better description of the problem.

Here's a relatively small repro case I extracted from my team's app expressed using React Native components (there's a JSFiddle later):

<View style={{"position":"absolute","left":0,"right":0,"top":0,"bottom":0}}>
  <View style={{"alignSelf":"flex-start"}}>
    <View style={{"flexShrink":1}}>
      <Text>
        Top Text
      </Text>
    </View>
    <View>
      <View style={{"flexGrow":1}}>
        <Text>
          Bottom Text
        </Text>
      </View>
    </View>
  </View>
</View>

Expected Result

Both "Top Text" and "Bottom Text" are visible (JSFiddle: https://jsfiddle.net/pygpx2oq/):

Actual Result

Only "Bottom Text" is visible:

Reproed using a version of React Native (https://github.com/facebook/react-native/commit/4c7576e485973391d4042e694523dbfe70e49b50) which appears to be using a version of Yoga from today (March 8).

Start with the React Native component repro and the linked JSFiddle, then trace how Yoga handles the nested flexGrow and flexShrink nodes. Compare the rendered result with the expected image and add a regression case showing that both text lines remain visible.