To avoid components overlapping in angular

Question

I have two components called customer-details and customer-bookings which are called by their selectors in app.component.html file as shown in below code

     <app-customer-details></app-customer-details>
     <app-customer-bookings></app-customer-bookings>

The components should look like this(i,e one below the other).

But it is overlapping like this.

Here i am facing overlapping issues,I tried to solve it by setting height to 50vh for each component. But i want to solve this overlapping issue without setting the height manually.

Here is the stackblitz link.

Answer 1

You should remove this from your table style:

position:absolute;

in customer-details.component.css

Answer 2

Noting to do with the component. Just modify the CSS.

table{
  /* position:absolute; */
}