iview侧边栏组件化后布局混乱

当我将侧边栏组件化后，出现如下问题：

content部分被排布到下面，须知layout布局采用的是flex布局。因此在代码上如此实现：

<template>
  <div id="layout">
    <Layout>
      <MyHeader></MyHeader>
      <div style="display:flex;">
        <MySider></MySider>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
      <MyFooter></MyFooter>
    </Layout>
  </div>
</template>

结论：sider组件化后布局混乱，往往是父组件flex属性失效导致，flex不能正常工作