通常，对于使用percent on height来获取其父代的高度的元素，父代需要的高度不是auto或定位为绝对高度，否则height将计算为auto。
基于这两个选项，并且正如您在注释中提到的那样，您自己的标题的高度是动态的，您将得到绝对的定位。
将绝对值添加到的问题content将被淘汰，并且不再像正常流动的flex项那样运行，这是一个好消息，可以将包装器设置为绝对值。
堆栈片段
.container { display: flex; flex-direction: column; width: 200px; height: 100px;}.header { display: flex; background-color: rgba(255, 0, 0, 0.5);}.content { position: relative; flex-grow: 1; background-color: rgba(0, 255, 0, 0.5);}.wrapper { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }.third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5);}<div > <div >Header</div> <div > <div > <div > Third party component </div> </div> </div></div>另一个选择可能是更新Flexbox属性，content使用flex: 1 1 100%，给定高度，使用高度和高度，header flex-shrink: 0;使其不收缩（达到content100％）。
不过，这可能无法在Safari上运行，因为我知道height未设置该属性时会遇到问题，但由于无法访问Safari，现在无法测试。
.container { display: flex; flex-direction: column; width: 200px; height: 100px;}.header { display: flex; flex-shrink: 0; background-color: rgba(255, 0, 0, 0.5);}.content { flex: 1 1 100%; background-color: rgba(0, 255, 0, 0.5);}.third-party-component { height: 100%; width: 100%; background-color: rgba(0, 0, 255, 0.5);}<div > <div >Header</div> <div > <div > Third party component </div> </div></div>
