Stackblitz: https://stackblitz.com/edit/angular-flex-chrome-squishing-text
<mat-accordion [multi]="false">
<mat-expansion-panel>
<mat-expansion-panel-header expandedHeight="116px" collapsedHeight="116px">
<div fxLayout="column" fxFlex="100%">
<div fxLayout="row" fxLayoutAlign="start center">
<span fxFlex="50%">header 1</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<span fxFlex="50%" >header 2</span>
<span fxFlex="50%">text 2</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<span fxFlex="50%" >header 3</span>
<span fxFlex="50%">text 3</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<span fxFlex="50%" >header 4</span>
<span fxFlex="50%">text 4</span>
</div>
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayoutAlign="none stretch">
<div fxFlex="1 1 auto" fxLayout="column">
<div fxLayout="column" fxFlex="100%">
<div fxLayout="row">
<span fxFlex="50%">header 5</span>
<span fxFlex="50%">text 5</span>
</div>
<div fxLayout="column">
<div fxLayout="row">
<span fxFlex="50%">header 6</span>
<span fxFlex="50%">text 6</span>
</div>
</div>
<div fxLayout="column">
<div fxLayout="row">
<span fxFlex="50%">header 7</span>
<span fxFlex="50%">text 7</span>
</div>
</div>
<div fxLayout="column">
<div fxLayout="row">
<span fxFlex="50%">header 8</span>
<span fxFlex="50%">text 8</span>
</div>
</div>
</div>
<div fxFlex="100%">
content goes here
</div>
</div>
<div class="space-taker"></div>
</div>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
Обратите внимание, что <div class="space-taker"></div> используется исключительно для учета пространства, занимаемого переключателем панели расширения в заголовке, и, если оно будет удалено, тогда текств заголовке, и содержимое не совпадает.
Именно поэтому я пытаюсь использовать flex для упорядочивания содержимого.
Кажется, что Chrome неправильно высчитывает высоту текста всодержание панели расширения.Firefox не отображает это поведение.
Chrome 72.0.3626.121:
Firefox 65.0.2:
Обратите внимание, что высота пролета рассчитывается как 11,25 пикселя в Chrome, тогда как в Firefox она правильно равна 18 пикселям.
Проблема усугубляется наличиембольше элементов в контейнере.
ОБНОВЛЕНИЕ: Похоже, что это была ошибка в Chrome 72. Этим утром я обновился до Chrome 73.0.3683.86, и теперь в Chrome ожидаемое поведение.Однако принятый ответ исправляет это в Chrome 72. Вот багтрекер: https://bugs.chromium.org/p/chromium/issues/detail?id=596743 и страница возможностей Chrome: https://www.chromestatus.com/feature/6736527476391936