(共556篇)
全部分类

钉钉内置浏览器flxtGrow的子元素不支持height百分比
[ 未分类 ] 

问题描述

如下代码所示, 最终的效果无论是IOS还是Android设备上的钉钉内置浏览器中, node元素并没有渲染成预想中的70%高度.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div>
    <div class="parent">
      parent
      <div class="child">
        child
        <div class="node">node</div>
      </div>
      <div>占位</div>
    </div>
    <div>{{ ua }}</div>
  </div>
</template>
<style lang="scss" scoped>
div {
  font-size: 20px;
}
.parent {
  height: 300px;
  background-color: red;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .child {
    flex-grow: 1;
    background-color: rgb(83, 189, 83);
    .node {
      height: 70%;
      background-color: rgb(98, 98, 253);
    }
  }
}
</style>
    .node {
      height: 70%;
      background-color: rgb(98, 98, 253);
    }
  }
}
</style>

希望的结果

解决方案

给child一个非auto的高度, 0也可以

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div>
    <div class="parent">
      parent
      <div class="child">
        child
        <div class="node">node</div>
      </div>
      <div>占位</div>
    </div>
    <div>{{ ua }}</div>
  </div>
</template>
<style lang="scss" scoped>
div {
  font-size: 20px;
}
.parent {
  height: 300px;
  background-color: red;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .child {
    flex-grow: 1;
    height: 0;
    background-color: rgb(83, 189, 83);
    .node {
      height: 70%;
      background-color: rgb(98, 98, 253);
    }
  }
}
</style>