Electron + Ionic - высота ионного ряда не подстраивается под его содержание

Question

У меня есть приложение Electron, созданное с использованием Angular + Ionic 4. Есть простой экран, который содержит три 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 height , но добавление его в ion-row не дало эффекта.Так как я пытаюсь избежать установки высоты на точное значение, я изо всех сил пытаюсь найти решение.Есть идеи, что мне попробовать?

Важно отметить, что это происходит только в Электроне.В Chrome и Firefox такой проблемы нет.

Answer 1

Я потратил один MD на эту вещь и обнаружил, что в среднем ряду есть flex-grow: 1. Это означает, что он займет все доступное пространство, которое может. Похоже, что в Chromium есть некоторая проблема, потому что это заставляет top ion-row и bottom ion-row сжиматься, чтобы быть короче, чем фактическая высота его содержимого.

Решение простое , просто добавьте flex-shrink: 0 в верхний и нижний ряды.