Материал гибкого макета - одна сетка перекрывает другую, когда она небольшого экрана

Question

Created this stackblitz .

Когда он находится на рабочем столе и в полноэкранном режиме, вывод выглядит хорошо, но когда размер окна браузера небольшой, одна сетка перекрывается с другой сеткой,

Я хочу, чтобы сетки были на 100% высотой, чтобы я мог поместить свое содержимое в них, а когда экран маленький, одна сетка должна занимать весь экран, то есть не больше или меньше всей высоты экрана минус верхnavbar.

Не уверен, но может быть из-за кода ниже.Но если я удаляю этот код CSS, я не получаю полноэкранные сетки.это означает, что это выглядит ниже

CSS:

.mat-drawer-content {
    position: absolute !important;
}

.mat-grid-list {
    height: 100%;
}

.mat-grid-list {
  position: initial !important;
}

Answer 1

IME, очень сложно - возможно, невозможно - обойти собственный механизм компоновки MatGrid и заставить его вести себя определенным образом, используя CSS или flex-layout, потому что компонент разработан для динамического размещения с использованием вычислений.Вы сделали все правильно с cols, но вам нужно применить ту же идею к rowHeight.Что-то вроде:

<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">

...

breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }

ngOnInit() {
  this.resize(window.innerWidth);
}

onResize(event) {
  this.resize(event.target.innerWidth);
}

resize(width: number) {
  if (width <= 400) {
    this.breakpoint = 1;
    this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
  } else {
    this.breakpoint = 4;
    this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
  }
}

Обратите внимание, что вам также необходимо применить к сетке некоторую фиксированную высоту - возможно, через родительский контейнер сетки (в вашем случае демо-компонент) и заставить сеткувозьмите высоту своего родителя:

:host {
  height: 300px !important;
  align-self: stretch;
  flex: 1 0 100%;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
.mat-grid-list {
  flex: 1 1 100%;
}

Это не совсем идеально, но гораздо лучше. Вот это на StackBlitz .