如何设置ChartJS使其始终位于div的底部？

Question

我已尽我所能想到的一切。我只是似乎无法使图表尊重到div的底部。我已在此Codepen中复制了图表，以便轻松进行分叉和编辑。我基本上将CSS直接从devtools复制并粘贴到Codepen中 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);
}

我正在尝试使div类似于此图片

Answer 1

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

将图表放在底部。但是，当前图表包含填充。您可以使用图表设置将其删除，也可以将其设置为更大的尺寸，为其设置负边距并隐藏上溢。