element ui整体引入，icon图标可以正常显示，layout布局显示失败

Question

main.js整体引入如下：

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App) 
}).$mount('#app')  

组件中模板如下：

<template>
<div>
        <div>布局样式</div>
        <i class="el-icon-edit"></i> //图标出现，说明样式成功
        <el-row :gutter="20">
            <el-col :span="16" :offset="4">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="16" :offset="4">
                <el-container style="height:500px;border:1px solid #eee">
                    <div>123456</div>
                </el-container>
                <el-container style="height:500px;border:1px solid #eee">
                    <div>123456</div>
                </el-container>
            </el-col>
        </el-row>
</div>        
</template>   

浏览器显示如下：

Answer 1

此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。