Flex 1: 1 не работает с ионной сеткой. Мне нужно выделить место 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>

результат:

Q: Можете ли вы сказать мне, почему я не вижу 50:50 выделение пространства с вышеуказанным дизайном?

Answer 1

Чтобы свойство flex: 1 работало, его родитель должен иметь свойство display: flex. По умолчанию display: flex показывает своих потомков подряд, поэтому нам нужно было изменить направление на столбец

* 1005.*

Answer 2

Насколько я вижу, проблема, похоже, в сокращении flex: 1. Сокращения Flex могут быть немного хитрыми в разных браузерах.

К сожалению, я не могу проверить свое решение в данный момент, но я бы сделал следующее:

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

Таким образом, оба элемента начнутся с height: 0, а flex Grow назначит оставшееся пространство обеим строкам одинаково