防止外部元素影响CSS中的flexbox图像溢出？

Question

当屏幕足够长时，两个图表都很合适。当屏幕垂直缩短时，图表会调整，但仅限于某一点。在那之后，图表不再缩小。在这个例子中，当屏幕太短以至于只是关闭图表时，如果删除带有文本内部的div，则图表现在适合屏幕。即使我的高度为0px＆＃39;也会发生这种情况。 问题：当Flex-container外部的页面上有其他元素占用空间时，如何让flex容器调整其高度/宽度？

https://jsfiddle.net/we3wo9nv/

func minTemperature() -> CGFloat? {
    guard let value = characteristic?.value else {
        return nil
    }
    let i16val = value.withUnsafeBytes { (ptr: UnsafePointer<Int16>) in
        ptr.pointee
    }
    return CGFloat(i16val) / 10.0
}