Angular Пользовательский интерфейс материала отображает содержимое вкладки подряд

Question

Я пытаюсь стилизовать вкладки Material Ui. Я организовал свой код для общего отображения вкладок, и в каждой вкладке у вас есть 3 основные категории с элементами, которые относятся к этой категории. Как вы можете видеть ниже, это был дизайн, который я имел в виду.

Вот как это выглядит в моем коде. Таким образом, dev Ops должен быть заголовком столбца, а 2 карты под ним - это элементы, которые принадлежат ему, но затем вместо того, чтобы показывать следующий столбец рядом с ним, он находится под ним.

Это мой код. Может ли кто-нибудь объяснить мне, как я получаю столбец рядом друг с другом, я пытался играть со строкой и столбцом гибкого направления, но не повезло Html:

 <mat-tab-group>
                <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
                    <ng-template matTabContent>
                            <div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
                                <div>
                                    <h3>{{skillcolumn.subcat}}</h3>
                                    <mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
                                        <mat-card-title>{{skillcard.skill}}</mat-card-title>
                                    </mat-card>
                                </div>
                                <mat-divider [vertical]="true"></mat-divider>
                            </div>
                    </ng-template>
                </mat-tab>
            </mat-tab-group>

sccs

 .mat-tab-group {
                    margin-top: 2%;
                    margin-left: 5%;
                    width: 85%;
                    height: 100%;


                        .skills-colomn {
                            margin-top: 5%;
                            width:100%;
                            height:100%;
                            display: flex;
                            flex-direction: row;


                            .div {
                                width:50%;


                                .skill-name {
                                    width: 95px;
                                    height: 95px;
                                }
                            }

                    }

Answer 1

Я нашел свою ошибку. Мне нужно было добавить дополнительный внешний div в колонку навыков с отображением строки flex, а также я как-то набрал div как класс! Я не могу поверить, что я не заметил этого раньше! HTML:

            <mat-tab-group>
            <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
                <ng-template matTabContent >
                    <div>
                        <div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
                            <div>
                                <h3>{{skillcolumn.subcat}}</h3>
                                <mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
                                    <mat-card-title>{{skillcard.skill}}</mat-card-title>
                                </mat-card>
                            </div>
                            <mat-divider [vertical]="true"></mat-divider>
                        </div>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

с css:

 .mat-tab-group {
                margin-top: 2%;
                margin-left: 5%;
                width: 85%;
                height: 100%;


                 div{
                     display: flex;
                     flex-direction: row;
                    .skills-colomn {

                        display: flex;
                        flex-direction: row;


                        div {

                            display: flex;
                            flex-direction: column;


                        }
                    }
                }