Weex: page show correct in web but incorrect in iOS device

Question

I use weex to start a project, and the login.vue is like:

<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>

When I run npm start, it shows like what I want in the browser:

However, when I run weex run ios, the simulator show a blank page:

I also try it in the device, and it shows a blank page, too.

So just wonder why it comes blank in the simulator and how can I find out the cause?

Answer 1

Weex doesn't support the complete flex shorthand syntax yet. You can only specify the flex-grow part.

In your example, use flex: 1; in .centerPart and it should adjust its height.