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

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

值得一提的是，它只发生在 Electron 中。 Chrome 和 Firefox 都没有这个问题。

Answer 1

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

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