CSS Fixar uma DIV na parte inferior de um elemento!

[Mizrain Phelipe Sá]

Olá pessoal, tenho uma "dashboard-box" com 3 divs filhos principais e gostaria de fixar a última div "box-rodapeGrafico" na parte inferior do box, somente essa div, como faço?

 

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

 

CSS da div mãe:

 

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

 

Quero colocar a Div da mensagem "Ultima atualização grudado na parte inferior"

 

[Mizrain Phelipe Sá]

Encontrei a solução!

 

Como o container Pai é flex, basta colocar um margin-top: auto na última div que é o rodapé.

 

.box-rodapeGrafico {
  margin-top: auto;
}