电子+离子-离子行高度不适应其含量

Question

我有一个使用Angular + Ionic 4构建的Electron应用程序。有一个简单的屏幕，其中包含ion-row中的三个ion-grid元素。

<ion-grid>
  <ion-row class="top-part">
    <ion-col>
      <form>
        <!-- Just one input -->
      <form>
    </ion-col>
    <ion-col>
      <ion-select></ion-select>
    </ion-col>
  </ion-row>
  ...
</ion-grid>

问题是该行的高度无法调整为其内容的高度，并导致布局中断。 Chromium Dev Tools将蓝色字段显示为实际高度，绿色线显示所需的高度，红色线显示另一个<ion-row>，现在它已经重叠了一点。

经检查，我发现ion-row和ion-col的高度设置都不正确。我尝试将height: fit-content添加到CSS，该CSS 解决了ion-col高度的问题，但是将其添加到ion-row无效。由于我试图避免将高度设置为确切的值，因此我努力寻找解决方案。知道我应该尝试什么吗？

要提到的重要事情是，它仅在Electron内部发生。 Chrome和Firefox都没有此问题。

Answer 1

我为此花了一个MD，结果发现中间行有flex-grow: 1。这意味着它将占用所有可能的可用空间。 Chromium中似乎存在一些问题，因为它迫使顶部ion-row和底部ion-row缩小到小于其内容的实际高度。

解决方案很简单，只需在顶部和底部的行中都添加flex-shrink: 0。