I have an Angular project where it displays news articles in a footer. These articles are basically boxes and one of the options is to see keywords about the article. My problem is the element that displays the keywords is being cut off, and I want to make sure it displays everything.

HTML article component:

<section class="article" *ngFor="let ID of showOnlyInterests()">

    <section class="firstColumn">

        <div class="articleHeader">

            <img src={{getOriginLogo(articles[ID].Origin)}} alt="" class="originLogo">
            <div class="articleInfo">

                <a class="articleOrigin" href={{articles[ID].Origin}} target="_blank">{{getOriginName(articles[ID].Origin)}}</a>
                <p class="spacing">•</p>
                <p class="articleDateTime">{{dateDiff(articles[ID].Date)}}</p>

            </div>

        </div>
        <div class="articleBody">

            <a class="articleTitle" href={{articles[ID].Link}} target="_blank">{{articles[ID].Title}}</a>
            <p class="articleSummary" [style.display]="checkValue(ID, 'Summary') ? '-webkit-box' : 'none'" [innerHTML]="articles[ID].Summary"></p>

        </div>
        <div class="articleBottom">

            <img src="./assets/img/like.svg" alt="" class="likeIcon">
            <p class="likeCount">161</p>
            <img src="./assets/img/dislike.svg" alt="" class="dislikeIcon">
            <img src="./assets/img/comment.svg" alt="" class="commentIcon">
            <p class="commentCount">23</p>

        </div>

    </section>
    <section class="secondColumn">

        <div class="articleImageBox" style="background-image: url({{articles[ID].Image}});"></div>
        <table class="keywordBox {{ID}} keywordHidden" *ngIf="filterKeyword == ''; else clearFilter">

            <tr class="keywordHeader">
    
                <th>
    
                    Keywords
    
                </th>
    
            </tr>
            <tr class="keywordText" (click)="articlesByKeyword(keyword, ID)"  *ngFor="let keyword of getKeywords(ID)">
            
                {{keyword}}
    
            </tr>
    
        </table>
        <ng-template #clearFilter>

            <table class="keywordBox {{ID}} keywordHidden">

                <th class="removeFilter" (click)="removeFilter()">Remove keyword selection</th>

            </table>

        </ng-template>
        <p href="" class="moreOptions" (click)="showKeywords(ID)">. . .</p>

    </section>

</section>

HTML news-footer component:

<section news_footer class="news_footer">

    <app-article></app-article>

</section>
<button class="hideFooter" (click)="toggleFooter()">

    <img [src]="footerButtonImg()" alt="" class="hideIcon">

</button>

CSS article component:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

p, a{

    margin: 0;
    display: inline-block;
    font-family: "Merriweather", serif;

}

.removeFilter{

    cursor: pointer;

}

.article{

    position: relative;
    width: 23.5%;
    height: 80%;
    margin: 0% 0.46% 0% 0.46%;
    /* border: 1px solid red; */
    display: flex;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #1F375E;
    color: white;
    flex: 0 0 auto;

}

.firstColumn, .secondColumn{

    height: 100%;
    position: relative;

}

.firstColumn{

    width: 60.27%;
    /* border: 1px solid rgb(0, 155, 0); */
    margin-right: 1.35%;
    margin-left: 4.59%;

}

.secondColumn{

    width: 27.57%;
    /* border: 1px solid rgb(50, 100, 180); */
    margin-left: 1.35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    align-content: flex-end;
    flex-wrap: wrap;

}

.articleHeader{

    margin-top: 2.25%;
    height: 13.89%;
    /* border: 1px solid rgb(200, 80, 80); */
    margin-bottom: 6.6%;
    font-size: 0.8em;
    display: flex;
    align-items: center;

}

.articleBody{

    margin-top: 6.6%;
    height: 52.08%;
    margin-bottom: 4.17%;
    /* border: 1px solid rgb(160, 160, 0); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.articleBottom{

    margin-top: 4.17%;
    font-size: 0.6875em;
    /* border: 1px solid rgb(50, 50, 90); */
    display: flex;
    align-items: center;

}

.originLogo{

    width: 8.97%;
    position: relative;
    margin-right: 2.24%;

}

.articleInfo{

    display: inline-block;
    width: 86.55%;
    margin-left: 2.24%;

}

.articleOrigin{

    margin-right: 1.81%;
    text-decoration: none;
    color: inherit;

}

.spacing{

    margin-left: 1.81%;
    margin-right: 1.81%;

}

.articleDateTime{

    margin-left: 1.81%;

}

.articleTitle{

    font-weight: bold;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875em;
    text-decoration: none;
    color: inherit;

}

.articleSummary{

    font-size: 0.75em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;

}

.likeIcon, .dislikeIcon, .commentIcon{

    width: 6.73%;
    position: relative;
    filter: invert(100%);

}

.likeIcon{

    margin-right: 2.02%;

}

.likeCount{

    margin-left: 2.02%;
    margin-right: 3.59%;

}

.dislikeIcon{

    margin-left: 3.59%;
    margin-right: 5.38%;

}

.commentIcon{

    margin-left: 5.38%;
    margin-right: 1.35%;
    
}

.commentCount{

    margin-left: 1.35%;

}

.articleImageBox{

    margin-bottom: 15.97%;
    margin-top: 11.11%;
    height: 54.86%;
    margin-left: 2.7%;
    margin-right: 2.7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 95%;
    background-size: cover;
    border-radius: 10%;
    background-origin: content-box;

}

.moreOptions{

    width: 100%;
    text-align: right;
    margin-top: 4.86%;
    margin-bottom: 4.86%;
    font-weight: bold;
    cursor: pointer;

}

.keywordBox{

    z-index: 1;
    position: absolute;
    left: -33%;
    bottom: 14%;
    border: 1px solid #43669f;
    width: 150%;
    background-color: #1F375E;

}

.keywordHidden{

    display: none;

}

.keywordText{

    cursor: pointer;

}

CSS news-footer:

.news_footer{

    position: absolute;
    width: 96.31%;
    height: 25%;
    border-top: 3px solid #d5dbe5;
    border-bottom: 3px solid #d5dbe5;
    top: 74.25%;
    left: 3.5%;

}

app-article{

    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    overflow-x: scroll;

}

.hideFooter{

    position: absolute;
    width: 2.5%;
    background-color: rgba(0,0,0,0);
    border: 0;
    top: 71.85%;
    right: 1.5%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: fit-content;
    justify-content: center;
    border-top: 1px solid #d5dbe5;
    border-left: 1px solid #d5dbe5;
    border-right: 1px solid #d5dbe5;

}

.hideIcon{

    width: 100%;
    padding: 15% 15% 0% 15%;

}

.check{

    top: 95%

}

I’ve already tried to put overflow-y: visible on every parent of the keywordBox element, changed heights of elements and putted a bigger z-index on the keywordBox element.