max-width doesn't work with a component's div-CodePudding

I have a chart component and i use it in a view. I want to make it smaller but max-width doesn't work.

Here is the codes:

<div id="chart">
    <ChanceChart :chartData="state.chartData" :chartOptions="state.chartOptions"/>
</div>

And:

  #chart {
    position: absolute;
    left: 0;
    top: 20px;
    display: block;
    width: 100%;
    max-width: 100px;
  }

Can anyone know what is the problem?

CodePudding user response：

You should override the style width !important. There is the same question that can help you Setting width and height

CodePudding user response：

Check out the link below in SandBox. It contains a working example for your case in vue.

Link to the example: https://codesandbox.io/s/div-max-width-xkgol?file=/src/components/HelloWorld.vue:0-512

    <template>
<div>
<div id="chart">Your ChanceChart placeholder!</div>
<p>◄ width: 100% & max-width: 100px</p>
</div>
</template>

<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>

<!--Add "scoped" attribute to limit CSS to this component only-- >
    <style scoped>
        #chart {
            background: beige;
        margin: 10px;
        padding: 10px;
        font-weight: bold;

        position: absolute;
        left: 0;
        top: 20px;
        display: block;
        width: 100%;
        max-width: 100px;
}
    </style>