我正在使用Chart.js图表和画布设计一个 Jmeter 板。请参见下面的 Jmeter 板：
设计正是我想要的，直到我调整页面大小使其变小，然后再次调整页面大小使其变大。当我这样做时，我最终得到以下结果：
直到我添加了第二个图表并将包含它们的div元素设置为flexbox后，这种情况才发生。
对于较小的窗口，可以轻松地将其大小调整为以下形式：
然后重新调整为上一张图的更大的形式。flexbox做了什么改变，停止了图表的自动调整大小？
我的代码如下。HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>CSS：
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}我只包括了html和css部分，因为我不认为Javascript是这里的问题，但我可以更新代码部分，如果有人认为这是问题。
1条答案
按热度按时间avkwfej41#
尝试从**.points_container-main和.bar-chart-container**中删除最大宽度、最小宽度样式。在Flex World中添加它们的样式：