First, let's tackle the terminology:
...how do I force an element nested inside of a member of a flexbox (by "member of a flexbox" I mean a child of an element styled with display:flex) to limit its size to the size of the flexbox member it's nested under?
An element with display: flex is called a flex container (technically) or flex parent (colloquially).
The children of a flex container are called flex items. Note the word children (first-level). Descendents of a flex container beyond the children are not flex items and most flex properties don't apply to them.
Now, addressing your question:
The problem is that Firefox (and apparently IE11) have a different interpretation of the percentage height rule than Chrome.
Specifically, the vertical scrollbar you want is not rendering in Chrome because you're using percentage heights in a way that doesn't conform with the traditional implementation of the spec.
CSS height property
percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".
auto
The height depends on the values of other properties.
In other words, if you want an element to have a percentage height, then you must specify a height on the containing block (i.e. the parent).
In your code, body (level 1) has height: 100vh.
One level down, .max-flex (level 2) has height: 100%.
Four levels down, .large-nested-div (level 4) has height: 100%.
However, at .variable-flex-content (level 3), there is no height property. You are defining the height with flex: 1 1 0. As far as Chrome is concerned, this is a missing link in the chain and a violation of the spec. Chrome is expecting to see the height property, and when it doesn't, it computes the height to auto.
Chrome vs Firefox (I haven't tested IE11, so I won't mention it here)
Traditionally, when calculating percentage heights, browsers have interpreted the spec's use of the term "height" to mean the value of the height property. It could just as easily be interpreted as a height (generic term), but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage heights.
Recently, however, as noted in this question and another one and another one, Firefox has broadened its interpretation to accept flex heights, as well.
It's not clear which browser is more compliant.
It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2).
The Solution
Instead of defining the height of .variable-flex-content with flex: 1 1 0%, try using height: 100% or height: calc(100% - 60px) or absolute positioning.
