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

Issue

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

My ChanceChart.vue :

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'ChanceChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

And maybe it can help, when my datas were in the ChanceChart.vue i could set the width. Now, when my data is in my main component and i use props, and v-binding it, it doesn't work.

And here is my data:

state: {
        chartData: {
          datasets: [
            {
              label: "Enemy's Chance",
              borderColor: '#1161ed',
              data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190]
            },
            {
              label: 'My Chance',
              borderColor: '#f87979',
              color: '#fff',
              data: [60,60,60,60,60,60,60,60,60,60,60,60, 60]
            }
          ],
          labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
        },
        chartOptions: {
          responsive: false
        }
      }

Can anyone know what is the problem?

Solution

Check out the link below in SandBox that i made based on your question. It contains a working example for your case in vue.

(Link to the example in Sandbox)

<template>
  <div>
    <div id="chart">
      Your ChanceChart placeholder!
      <img alt="Vue logo" src="../assets/logo.png" width="100%">
    </div>
    <p>◄ width: 100% & max-width: 100px</p>
    <img alt="Vue logo" src="../assets/logo.png" width="50%">
    <a
      href="https://stackoverflow.com/questions/70448373/max-width-doesnt-work-with-a-components-div/70449079#70449079"
      target="_blank"
      >Ref</a
    >
  </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>

Update

Keep the same settings and change the responsive property of your chartOptions to true. Then your chart extends to the maximum width that you have already set for.

 chartOptions: {
      responsive: true,
    },

Check the solution here in sandbox.

Answered By - Ali Safari