To avoid components overlapping in angular

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.

2 Answers

You should remove this from your table style:

position:absolute; 

in customer-details.component.css

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

table{ /* position:absolute; */ }