max-width 不适用于组件的 div答案

【问题标题】：max-width doesn't work with a component's divmax-width 不适用于组件的 div
【发布时间】：2022-01-23 15:18:30
【问题描述】：

我有一个图表组件，我在视图中使用它。我想让它变小，但 max-width 不起作用。

代码如下：

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

还有：

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

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

也许它会有所帮助，当我的数据在 ChanceChart.vue 中时，我可以设置宽度。现在，当我的数据在我的主要组件中并且我使用 props 并对其进行 v-binding 时，它不起作用。

这是我的数据：

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

谁能知道是什么问题？

【问题讨论】：

你能分享一下 jsFiddle 或 codesandbox 之类的演示链接吗？

标签： html css vue.js

【解决方案1】：

查看我根据您的问题制作的 SandBox 中的以下链接。它包含一个适用于您在 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>

更新

保持相同的设置并将chartOptions 的responsive 属性更改为true。然后您的图表将扩展到您已经设置的最大宽度。

 chartOptions: {
      responsive: true,
    },

检查解决方案 here in sandbox。

【讨论】：

现在 div 100px 但我的图表悬在 div 上。也许这就是问题所在。你有什么解决办法吗？
我已经更新了示例代码。由于您没有包含问题的示例代码，因此我只是使用图像代替了您的图表。我使用了有和没有最大宽度限制的图像。在<div id="chart">中，虽然宽度设置为100%，但是还是由max-width css属性控制的。因此，如果您的图表是图像，则它应该与示例代码一起使用，否则您需要先分享您的问题的演示，然后我才能说些什么。
我更新了我的问题：D
你能在沙盒中分享你的代码吗？不幸的是，像这样调试需要时间。
是的，这是我的代码：codesandbox.io/s/agitated-leakey-pfbzm?file=/src/App.vue

【解决方案2】：

您应该覆盖样式宽度 !important。有同样的问题可以帮助你 Setting width and height

【讨论】：