Angular：div与div内部组件匹配的高度

Question

我有一个显示旁边组件和div的家庭组件。这两个应该以相同的高度彼此相邻显示。 （家庭组件内的div与旁边组件内的div的高度相匹配）

我得到了一个工作解决方案，我在app-aside标签上使用了“display：contents”。这不是一个可用的解决方案，因为Edge不支持它。

https://stackblitz.com/edit/angular-vkgwsb

我也试过“display：table”和“display：table-cell”，这也是行不通的。

---

app.component.html

<div class="wrapper">
  <div class="container">
    <div class="content"></div>
    <app-aside></app-aside>
  </div>
</div>

app.component.css

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  width: 100%;
}

.content {
  min-height: 500px;
  width: 840px;
}

aside.component.html

<div class="sidebar"></div>

aside.component.css

.sidebar {
  min-height: 200px;
  width: 360px;
}

两个Div（内容和侧边栏）应具有相同的高度。

Answer 1

您的aside元素与.content div具有相同的高度，因为显示：容器上的flex。问题是app-aside组件内的侧边栏div。删除.sidebar div（并使用css中的:host {}选择器设置app-aside样式）或将height: 100%添加到.sidebar div。