为什么当我弯曲父容器时 Chrome 会挤压我的文本？答案

【问题标题】：Why does Chrome squish my text when I flex a parent container?为什么当我弯曲父容器时 Chrome 会挤压我的文本？
【发布时间】：2019-03-27 15:45:24
【问题描述】：

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> 纯粹是为了说明标题中的扩展面板切换占用的空间，如果将其删除，则标题中的文本和内容不会对齐。

那个 div 是我尝试使用 flex 来排列内容的原因。

Chrome 似乎错误地计算了扩展面板内容中文本的高度。 Firefox 不显示此行为。

Chrome 72.0.3626.121：

Firefox 65.0.2：

请注意，跨度的高度在 Chrome 中计算为 11.25px，而在 Firefox 中正确计算为 18px。

容器中的项目越多，问题就越严重。

更新：看起来这是 Chrome 72 中的错误。今天早上我更新到 Chrome 73.0.3683.86，Chrome 现在具有预期的行为。但是，接受的答案确实在 Chrome 72 中修复了它。这是 bugtracker：https://bugs.chromium.org/p/chromium/issues/detail?id=596743 和 chrome 功能页面：https://www.chromestatus.com/feature/6736527476391936

【问题讨论】：

Logan，你在 Stackbitz 上的例子看起来不错，使用 chrome 我得到 19.09px 的高度
无法复制问题。
你们用的是什么操作系统？我在 Windows 10 1803 上。

标签： html css angular flexbox angular-material

【解决方案1】：

在 header 5-8 的父 div 中，放置 flex-shrink: 0 或 fxFlex="1 0 auto"。

演示https://stackblitz.com/edit/angular-flex-chrome-squishing-text-c3v5p9

【讨论】：

看起来我拉下 Chrome 73 并解决了我原来的问题，但这确实在 Chrome 72 中解决了它。