problem description

create the project using weex, and then modify the page. The page consists of three div. npm start displays the content in the browser, but displays blank space on the iOS simulator and real machine

the environmental background of the problems and what methods you have tried

Environment:

• iOS 12.0
• weex 0.18.0

related codes

the contents of the vue file are as follows:

<template>
  <div class="login">
    <div class="images">1
    </div>
    <div class="centerPart">2
    </div>
    <div class="agree">3</div>
  </div>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.login :first-child{
  height: 250px;
}
.login :last-child{
  height: 200px;
}
.images {
  flex: 0 0 auto;
  background-color: aqua;
}
.centerPart{
  flex: 1 0 auto;
  background-color: yellow;
}
.agree {
  flex: 0 0 auto;
  background-color: coral;
}
</style>

<script>

</script>

what result do you expect? What is the error message actually seen?

appears in the browser as follows and as I expected:

iOS:

attempted method

1. try to delete all the child elements in login div to show red;
2. keep the child elements, try to set the height of the login, but it is still white;

it is suspected that it is caused by flex, but I don"t know how to solve it.