Укажите ширину карточки материала в качестве родительского элемента во встроенном div

Question

Я делаю встроенный div из трех столбцов и добавляю мат-карту слева. При этом, из-за относительного положения мат-карты, div смещается вниз. И при выполнении абсолютной позиции мат-карта приходит в положение, как я хотел, однако ширина не регулируется как родительская. Может кто-нибудь мне помочь?

Это мой HTML

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

И CSS

#main{
    height:calc(100vh - 64px);

    #components{
    width:30% !important;
    display: inline-block;
    height:100%;
    }

   #preview{
    width:40% !important;
    display: inline-block;
    height:100%;
   }

   #properties{
    width:30% !important;
    display: inline-block;
    height:100%;
    }
}
mat-card{
position:absolute;
}

Ниже приводится вывод

Я хочу настроить карту в левом блоке.

Пожалуйста, помогите мне!!!!!

Answer 1

Пока я выровняю вашу карточку с матом в нижней части div и она занимает 100% ширины родителя, скажите мне, где вы хотите карточку с матом, я улучшу ответ.

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    display: flex;
    align-items: flex-start;
    }
    mat-card {
    width: 100%;
    background: yellow;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}
}

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

Answer 2

Другое решение для вас без использования flex и только абсолютное положение. Проверь это.

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    position: relative;
    }
    mat-card {
    width: 100%;
      display: block;
    background: yellow;
      position: absolute;
      top: 10px;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>