progress组件设置width宽度不生效

奔跑的狮子

现象描述

progress组件直接设置width或者给其父组件div设置width，宽度均不生效，如下图所示：

问题代码如下：

<template>
<div class="item-container">
<div class="container">
<progress class="progress" type="horizontal" percent="30"></progress>
</div>
</div>
</template>
<style>
  .item-container {
    flex-direction: column;
  }
  .container {
    width: 50%;
  }
  .progress {
    width: 50%;
  }
</style>
<script>
  export default {
    data: {
    },
    onInit() {
    },
  };
</script>

行进的蜗牛

问题分析

上述代码中未显式指定父组件div为纵向布局。

解放方法

在父组件div上设置“flex-direction: column; ”即可，修改代码如下：

.container {
    flex-direction: column;
    width: 50%;
  }

运行效果如下：