Electron + Ionic - 离子行高度不会根据其内容进行调整

Question

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

中的三个 ion-row 元素

<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， 修复了 ion-col 高度 的问题，但将其添加到 ion-row 没有效果。由于我试图避免将高度设置为精确值，因此我正在努力寻找解决方案。知道我应该尝试什么吗？

重要的是，它只发生在 Electron 中。 Chrome 和 Firefox 都没有这个问题。

Answer 1

我在这个东西上花了一个 MD，然后我发现，中间一行有 flex-grow: 1。这意味着它会尽可能地使用所有可用的 space。 Chromium 中似乎存在一些问题，因为它强制顶部 ion-row 和底部 ion-row 缩小到比其内容的实际高度短。

解决方法很简单，只需在顶行和底行添加flex-shrink: 0即可。

Electron + Ionic - 离子行高度不会根据其内容进行调整

Electron + Ionic - ion-row height does not adjust to its content

html

css

electron

angular

ionic4