Угловая прокрутка в Div, покрытая другими div, скрытыми *ngIf ⇐ CSS

[Anonymous]

I am developing a website with Angular and I have a card, which can select a text on a menu on the left. All the texts will be displayed by *ngIf. The Problem is, that if the first and lowest layer has an overflow and you want to scroll it doesn't work, because of the other texts being above it but disabled by *ngIf.

I found it out by using only one Layer and it worked fine. Is there any way to make the Disabled texts by *ngIf completely vanish so it doesn't block my scroll on the Layers below? Thanks for help and I am sorry for my English.

This is the HTML code of the Card Component:

{{headLine}}

• {{prefix}}{{i}}

{{texts[i-1]}}



This is the CSS code: I took the Grid Display to Develop the Card. You can ignore all the comments
.container { display: grid; grid-template-columns: 70px 140px 140px 140px 140px 140px; grid-template-rows: 70px 120px 120px; border-radius: 71px; // background: #e0e0e0; backdrop-filter: blur(10px); } .item1 { grid-column-start: 1; grid-column-end: 7; grid-row-start: 1; grid-row-end: 2; display: flex; justify-content: center; align-items: center; border-top-left-radius: 71px; border-top-right-radius: 71px; border: 1px solid gray; border-bottom: none; font-weight: 700; } .item2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; border-bottom-left-radius: 71px; border: 1px solid gray; border-right: none; } .item3 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; // border-bottom-right-radius: 71px; border: 1px solid gray; padding: 10px; overflow: auto; // -ms-overflow-style: none; // scrollbar-width: none; } // .item3::-webkit-scrollbar { // display: none; // } .item4 { grid-column-start: 4; grid-column-end: 7; grid-row-start: 2; grid-row-end: 4; // background: url('../../assets/Spartans2.jpg'); // background-repeat: no-repeat; // background-position: center; // background-size: cover; // background-attachment: fixed; object-fit: conatain; border: 1px solid gray; border-left: none; border-bottom-right-radius: 71px; } .item4 img { max-width: 100%; max-height: 100%; } .partList { display: flex; flex-direction: column; // justify-content: center; align-items: center; list-style-type: none; gap: 15px; } .partList a { text-decoration: none; cursor: pointer; } .partList a:hover { opacity: 0.8; } .part1 { margin-top: 20px; }

Источник: https://stackoverflow.com/questions/780 ... en-by-ngif