Как избежать наложения элементов в Angular

Question

Мое приложение на основе углов, я динамически заполняю страницу строками таблицы.Под страницей находится консоль приложения, положение этого элемента, по-видимому, фиксировано.Когда я нажимаю кнопку, добавляется новая строка, новая строка перекрывается с app-console.Как этого избежать.

Ниже приведен фрагмент изображения и кода.

**app.component.html**
<div>
  <button style="width:100px;" class="btn" (click)="addProduct()" >Add 
   Product</button>
.... other elements needed for table row ....
</div>
 <br>
<app-console [consoleMessages]="consoleMessages"></app-console>

**app.component.ts**


addProduct () {
    let product = JSON.parse(JSON.stringify(this.productTemplate));
    this.record['products'].push(product);//dynamically adds table row 
  }

Angular поддерживает динамическое добавление элементов, как избежать элементов изперекрытие?

обновление по этому вопросу:

console.component.html

<mat-tab-group class="console">
  <mat-tab class="tab" label="Console">
    <pre style="height:200px;"><code [innerHtml]="htmlCode">

console.component.ts import {Component, OnInit, Input} из '@ angular / core';импорт {highlightAuto} из 'highlight.js';@Component ({selector: 'app-console', templateUrl: './console.component.html', styleUrls: ['./console.component.css']}) класс экспорта ConsoleComponent реализует OnInit {@Input () consoleMessagesзнак равноconsoleHtmlMessages = '';constructor () {} ngOnInit () {} get htmlCode () {return highlightAuto (this.consoleMessages, ['html']). value;}}

Answer 1

/* reset the html and body */
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.list, .console {
  box-sizing: border-box;
  padding: 0 1em;
  /* this scroll will keep both areas always visible */
  overflow: auto;
}

.list {
  background: #ccedff;
  flex-grow: 1;
}

.console {
  background: #eeefef;
  /* define a minumum size to your console */
  min-height: 200px;
}

<div class="container">
  <div class="list">
    <!--- // your list component... -->
  </div>
  <div class="console">
    <!--- // your console component... -->
  </div>
</div>

Obs: фрагмент здесь не отображается правильно, поэтому вы можете увидеть живой пример ниже.

Живой пример