How to Pin a DIV to the Bottom of an Element?

Question

have a "Dashboard-box" with 3 Four main children and would like to fix the last div "box-footer" at the bottom of the box, only this div, how do I do?

I want to put the Div of the message "Last update" stuck at the bottom.

.dashboard-box {
    border-radius: 1em;
    display: flex;
    flex-direction: column;   
    padding: 20px;
    width: 100%;
    max-width: 650px;
    height: 410px;
    background-color: white;
    margin: 0 12px;
}

<div class="dashboard-box" style="max-width: 1100px;height: 510px;">

                    <div style="display:flex;border-bottom-style: solid;border-bottom-color: aliceblue;">
                        <div class="boxIconGrafico box1">
                            <img src="~/images/pie-chart (1).png" width="35" />
                        </div>
                        <span class="tituloGrafico">Casos Investigados (Homicidios e Feminicidios)</span>
                    </div>
                    <div style="display:flex;">
                        <div class="grafico" id="" style="width:500px; height:250px">
                            <canvas id="GrCasos"></canvas>
                        </div>

                        <div class="grafico" id="" style="width:500px; height:250px">
                            <canvas id="GrRegistros"></canvas>
                        </div>
                    </div>
                    <div class="box-rodapeGrafico">
                        <span class="material-icons">update</span>Ultimo atualização: 22/12/2020
                    </div>

                </div>

Answer 1

As your container Father is flex, just put a margin-top: auto in the latter div which is your footnote

Follow the image code above:
(I added an edge just to make it easier to see that it was aligned on Dad’s base)

.dashboard-box {
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%;
  max-width: 650px;
  height: 410px;
  background-color: white;
  margin: 0 12px;
  
  border: 1px solid black;
}
.box-rodapeGrafico {
  margin-top: auto;
}

<div class="dashboard-box" style="max-width: 1100px;height: 510px;">

  <div style="display:flex;border-bottom-style: solid;border-bottom-color: aliceblue;">
    <div class="boxIconGrafico box1">
      <img src="~/images/pie-chart (1).png" width="35" />
    </div>
    <span class="tituloGrafico">Casos Investigados (Homicidios e Feminicidios)</span>
  </div>

  <div style="display:flex;">
    <div class="grafico" id="" style="width:500px; height:250px">
      <canvas id="GrCasos"></canvas>
    </div>

    <div class="grafico" id="" style="width:500px; height:250px">
      <canvas id="GrRegistros"></canvas>
    </div>
  </div>

  <div class="box-rodapeGrafico">
    <span class="material-icons">update</span>Ultimo atualização: 22/12/2020
  </div>

</div>