角度 4 中的 Flexbox 问题答案

【问题标题】：Flexbox issue in angular 4角度 4 中的 Flexbox 问题
【发布时间】：2017-10-09 16:21:42
【问题描述】：

我需要有固定的标题和固定的侧边栏。我在另一个 html css 中使用 flexbox 执行此操作。我工作完美。

我把代码贴在这里

<body>
   <header>
       header
   </header>

   <section id="content">
       <div class="sidebar" style="color: #fff">
           sidebar
       </div>
       <div id="main_content">
           content
       </div>
   </section>
</body>

scss

html, body {
   height: 100%;
}

header {
   background-color: yellow;
   height: 80px;
}

#content {
   background-color: #ccc;
   flex: 1;
   overflow: auto;
   display: flex;
}
.sidebar {
   width: 200px;
   background-color: #000;

}
#main_content {
   flex: 1;
   width: 100%;
   overflow: auto;
}

body {
   display: flex;
   flex-direction: column;  
}

但是当我将此代码应用于 angular4.. 时它不起作用，它让我发疯。这是我的角码

在report.component.html中

<header>
   <app-header></app-header>    
</header>

<section id="content">
   <div class="sidebar">
       <app-aside></app-aside>
   </div>
   <div id="main_content">
       <app-content></app-content>
   </div>
</section>

在 style.scss 中，我应用了我之前写的样式..

在report.component.scss 中我什么也没写.. 请帮我如果您想检查此问题，请使用 angular-cli 制作一个项目并查看问题

【问题讨论】：

标签： angular sass flexbox angular2-template

【解决方案1】：

内部报告组件将所有元素包装到具有“flex-container”类的 div 中，而不是使 div “display: flex”。这可能会对您有所帮助；）

【讨论】：