Electron + Ionic - 离子行高度不适应其内容答案

【问题标题】：Electron + Ionic - ion-row height does not adjust to its contentElectron + Ionic - 离子行高度不适应其内容
【发布时间】：2019-11-20 19:37:26
【问题描述】：

我有一个使用 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 都没有这个问题。

【问题讨论】：

标签： html css angular electron ionic4

【解决方案1】：

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

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

【讨论】：