Угловой: Соответствие высоты div с div внутри компонента

Question

У меня есть домашний компонент, который отображает сторонний компонент и div. Эти два должны отображаться рядом друг с другом с одинаковой высотой. (Div внутри home-компонента должен соответствовать высоте div внутри стороннего компонента)

Я получил рабочее решение, в котором я использовал «display: contents» в теге app-aside. Это не пригодное для использования решение, поскольку оно не поддерживается 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 (и отформатируйте приложение в стороне, используя селектор :host {} в css) ИЛИ добавьте height: 100% к div .sidebar.