Flexbox CSS doesn't works well in ion-content container

Ionic Framework ionic-v3
1

Test mobile: Android 6.0
Global packages:

@ionic/cli-plugin-proxy : 1.3.2
@ionic/cli-utils        : 1.5.0
Cordova CLI             : 7.0.1
Ionic CLI               : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.1
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.1.2 browser 4.1.0
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v6.9.2
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.10.9

Description:

I need an auto-fit area (where I named as #stage below) in an ion-content container, so I create such Layout:

<ion-header>
    <ion-navbar>
        <ion-title>Image Attribute</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="photo-proper">
   <div class="title">Select subject: </div>
    <ion-row wrap class="subjects">
        <button ion-button class="sbutton" *ngFor="let subject of user.subjects" [class.selected]="subject==proper.subject" (click)="proper.subject=subject">
            {{subject}}
        </button>
    </ion-row>

    <div class="title">Preview: </div> 
    <div id="stage">
        <img id="photo" (load)="onImageLoad($event)" [src]="viewPath | safe: 'url'" />
    </div>
</ion-content>

<ion-footer class="photo-proper">
    <ion-toolbar class="tb">
        <ion-buttons start [hidden]="!showCrop">
            <button ion-button icon-only color="light" small (click)="imageCrop()"><ion-icon class="crop"></ion-icon></button>
            <button ion-button icon-only color="light" small (click)="imageRotate(-90)"><ion-icon class="turn-left"></ion-icon></button>
            <button ion-button icon-only color="light" small (click)="imageRotate(90)"><ion-icon class="turn-right"></ion-icon></button>
        </ion-buttons>

        <ion-buttons end>
            <button ion-button icon-only color="light" small (click)="close()"><ion-icon class="cancel"></ion-icon></button>
            <button ion-button icon-only color="light" small (click)="submit()"><ion-icon class="confirm"></ion-icon></button>
        </ion-buttons>

    </ion-toolbar>
</ion-footer>

CSS defined:

ion-content.photo-proper {
    padding: 5px;
    div.scroll-content {
        display: flex;
        //height: 100%;
        flex-flow: column;
    }
    div#stage {
        flex: 1; 
        //height: 100px;
        //background: red; 
        border: 5px solid red;
        display: flex;
        justify-content: center;
        //overflow: hidden;
        img#photo {
            max-width: 100%;
            max-height: 100%;
            width: 0;
            height: 0;
        }
        //margin-bottom: 56px;
    }
    .title {
        font-size: 1em; //border-bottom: 1px #cccccc solid;
        margin: 10px 10px;
        display: flex;
    }
    .subjects {
        //padding: 5px;
        margin: 0 10px;
        .sbutton {
            font-size: 0.8em; //border: 2px #ffffff solid;
            //border-radius: 6px;
            background-color: #cccccc;
            color: #000000;
            text-align: center;
            height: 2em;
        }
        .sbutton.selected {
            background-color: #ff5c18;
            color: #ffffff;
            white-space: nowrap;
        }
        .sbutton.addnew {
            background-color: #00ac4d;
            color: #fff;
        }
    }
}

However, when I create a ModalController to show the page, the div#stage always beyond the height of the content container. It seems that, div#stage won’t update itself when content adjust height.

Hope help!

2

There is a temporary way, which can works, but not be explainable.

ionViewDidLoad() {

        setTimeout(() => {
            let stage = document.getElementById('stage');
            stage.style.flex = "1";
            console.log(stage.clientHeight);

            ...
        }, 500);
    }
3

No one can answer me?