如何将ChartJS设置为总是在div的底部？

Question

我已经尝试了我能想到的一切。我似乎无法让图表尊重到达div的底部。我在此 Codepen 中复制了我的图表，以便于分叉和编辑。我基本上将我的CSS直接从开发工具复制并粘贴到代码笔中 https://codepen.io/spkellydev/pen/JwQqKr?editors=1011

CSS :
#myChart {
  animation-delay:0s;
  animation-direction:normal;
  animation-duration:0.001s;
  animation-fill-mode:none;
  animation-iteration-count:1;
  animation-name:chartjs-render-animation;
  animation-play-state:running;
  animation-timing-function:ease;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:192px;
  line-height:24px;
  overflow-wrap:break-word;
  text-align:left;
  text-size-adjust:100%;
  width: 385px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.myChart {
  background-color:rgb(236, 236, 236);
  border-left-color:rgb(0, 166, 217);
  border-left-style:solid;
  border-left-width:3px;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:296px;
  line-height:24px;
  margin-bottom:24px;
  margin-top:48px;
  min-height:296px;
  overflow-wrap:break-word;
  position:relative;
  text-align:left;
  text-size-adjust:100%;
  width:387.703px;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

Answer 1

.myChart {
  display: flex;
  flex-direction: column;
}
.myChart p {
  flex-grow: 1;
}

将图表置于底部。但是，当前图表包含填充。您可以使用图表设置来删除它们，也可以将其调整得更大一些，给它负的边距并隐藏溢出。