Flexbox-溢出：自动以奇怪的方式剪辑内容

Question

我有一个简单的flexbox布局-请参见此CodePen

我的问题是，当我缩小浏览器窗口时（例如，通过打开DevTools或进入响应模式），“ home_body” DIV开始从顶部开始丢失（剪切）其内容。缩小窗口高度的次数越多，丢失的内容就越多（这意味着您无法通过移动滚动条看到此内容）。

那是为什么？我的布局有什么问题？

'.source.js':
  'Console log':
    'prefix': 'log'
    'body': 'console.log($1)$0'
  'Constructor':
    'prefix': 'rcon'
    'body': """
        constructor(props){
            super(props);
            this.state = {$1};
        }$0
    """
  'Component':
    'prefix': 'rcom'
    'body': """
        class $1 extends Component {
            render(){
                return(
                    <div>
                        $2
                    </div>
                );
            }
        }$0
    """