Flex 1:1 不适用于 Ionic 网格。我需要分配空间 50: 50

Question

.scss

.content {
    ion-grid {
        height: 100% !important;
    }
    .row1 {
        flex: 1 !important;
    }
    .row2 {
        flex: 1 !important;
    }
}

.html

<ion-content class="content">
  <ion-grid>
    <ion-row class="row1">
      <ion-col size="12">
          S-Works Venge Disc – SRAM eTAP
      </ion-col>
    </ion-row>
    <ion-row class="row2">
      <ion-col size="12">
        <ion-row>
          <ion-col size="12">
            S-Works Venge Disc – SRAM eTAP
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            Availability : Upon Request
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            About
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            We aren't satisfied with second fastest. Hello, why do you think we have our own Win Tunnel and the motto,
            "Aero is Everything?" We live and breathe aero, because we know that aerodynamic optimization is the best
            thing we can do to make you faster. And this philosophy has never been truer than with the new Venge. Being
            eight seconds faster than the ViAS, it’s not only the most aerodynamic bike on the road, but it’s also lost
            460 grams. And now with SRAM RED eTAP, you’re definitively looking at the new shape of speed.
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

结果：

问：你能告诉我为什么上面的设计看不到50:50空间分配吗？

Answer 1

要使flex: 1 属性起作用，其父级必须具有display: flex 属性 默认情况下，display: flex 在一行中显示其子元素，这就是为什么我们需要将方向更改为列

ion-grid {
    display: flex;
    flex-direction: column;
    height: 100% !important;
}

Answer 2

就我所见，问题似乎出在简写 flex: 1 上。 Flex 速记在不同的浏览器中可能有点棘手。

很遗憾，我目前无法测试我的解决方案，但我会执行以下操作：

.row1,
.row2 {
  flex-basis: 0;
  flex-grow: 1;
}

这样，两个项目都将从 height: 0 开始，并且 flex grow 会将剩余空间平均分配给两行