In this flip card demo只要背面卡片上没有echart（<chart></chart>）图表，翻转卡片就可以工作。
CSS网格用于响应式布局，演示中根据视口的宽度，并排或列式布局两张翻转卡。
当两张卡片排成一行时，它们应该并排出现，并由一个间隙隔开，但是当图表在每张翻转卡片的正面和背面都呈现时，当视口调整大小时，它会中断呈现（卡片彼此溢出，如果翻转，它们会出现错位）。
这是演示的标记，它的工作方式是应该的。在这个演示中，背面的卡上没有<chart></chart>，因此，只要有足够的空间，网格内的两张翻转卡就会将它们排成一行。

<h1>Flip on Y Axis Fixed</h1>

<section class="GridContainer">
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <h1>HELLO</h1> </flip-card-back>
    </flip-card>
  </div>
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <h1>HELLO</h1> </flip-card-back>
    </flip-card>
  </div>
</section>

字符串
如果按下翻转按钮，我们可以看到卡片在网格的相应区域内翻转。
但是，如果我们把EChart条形图放在翻转卡的正面和背面，当视口调整大小时，演示会中断，导致网格改变其布局。

如果视口未更改，则可能工作正常。

我认为这是因为当翻转卡隐藏一张卡时，它设置了backface-visibility: hidden;，这会导致EChart溢出容器，从而“破坏”html。
这就是“中断”的标记。

<h1>Flip on Y Axis Error</h1>

<section class="GridContainer">
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <chart></chart> </flip-card-back>
    </flip-card>
  </div>
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <chart></chart> </flip-card-back>
    </flip-card>
  </div>
</section>

型
有没有人有任何想法如何解决这个问题？