4 колонки внутри диалогового окна материала

Question

Мне нужно отобразить 4 столбца внутри диалогового окна материала без начальной загрузки. Его приближающийся беспорядок и его не отзывчивый также. Я попробовал с flexbox и обычным css. Но не повезло. Мне нужно 4 отзывчивых столбца, первые 3 строки зависит от моей модели. Но последний - это отдельный столбец со строкой (полный)

<mat-dialog-content class="mat-typography" style="padding: 0;margin:0;">
    <ul class="widthAuto">
        <li style="width:70%;">
            <div class='wrapper'>
                <ng-container *ngFor="let columnInfo of columnsDefinitions">
                    <ng-container *ngIf="columnInfo.isVisibleInsideFilterPopup">
                        <div class='row'>
                            <div class='column first-col'>
                                <label>{{columnInfo.title}}</label>
                                <!-- If any issue , add {{columnInfo.field}} and debug for more clarity  -->
                            </div>
                            <div class='column justify-content-center'>
                                <!-- CRITERIA SELECTION ACTION BUTTONS -->
                                <ng-container *ngFor="let criteriaKey of objectKeys(columnInfo.filterCriteria)">

                                    <span>
                                        <input type="submit" matTooltip=""
                                            class="button cursor-pointer"

                                            value="abc" />
                                    </span>
                                </ng-container>
                            </div>
                            <div class='column'>
                                <div [ngSwitch]="columnInfo.control">
                                   //All controls
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </ng-container>
            </div>
        </li>
        <li style="width:30%;background:pink;vertical-align: top">
            <ul style=" padding: 0px;">
                <li>
                    <label class="bold">Fruit:</label>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>

                </li>
                <br />


            </ul>

        </li>
    </ul>
</mat-dialog-content>

.wrapper {
    margin: 1px;
  }

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;margin-bottom:5px;
  }

  .column {
    display: flex;
    /* flex-direction: column; */
    flex-basis: 100%;
    flex: 1;
    margin:auto;
  }

  .justify-content-center{
    justify-content: center;
  }

.first-col{
    flex: 0 0 76px;
}
.widthAuto{
    width:auto;
}

Answer 1

С некоторым упрощением вашей разметки, приведенный ниже фрагмент должен демонстрировать 4 отзывчивых столбца с помощью flex-box.

Вы можете использовать flex-grow, чтобы контролировать размер каждого столбца в отзывчивом виде:

Свойство flex-grow CSS задает, сколько оставшегося пространства в гибком контейнере должно быть назначено этому элементу (коэффициент гибкого роста).

Разрешить контейнер (илидиалог), чтобы контролировать размер.

Надеюсь, это поможет.

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<html>
  <body>
    <div class='content'>
      <div class='column' style='background-color: red;'>
        <div class='row'>Column 1, Row 1</div>
        <div class='row'>Column 1, Row 2</div>
      </div>
      <div class='column' style='background-color: blue;'>
        <div class='row'>Column 2</div>
      </div>
      <div class='column' style='background-color: yellow;'>
        <div class='row'>Column 3</div>
      </div>
      <div class='column' style='background-color: green;'>
        <div class='row'>Column 4</div>
      </div>
    </div>
  </body>
</html>