Resize pie chart from chart.js - css

Question

I am trying to order a series of graphics that I have (from the chart.js library) and there is one that is impossible for me to handle. Then I show a screenshot of how it looks,
As you can see, the one on the left and the one on the lower right are in place, but the pie type (circular) does what it wants.
Code:
#graficos_container {
height: 100%;
width: 100%;
background-color: #e0e0e0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#one_graph {
height: 500px;
width: 55%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
#prueba {
width: 90%;
}
#paquetes_graf {
height: auto;
width: 90%;
background-color: tomato;
}
#two_graph {
height: 500px;
width: 35%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
}
.single_two_graph {
height: 50%;
width: 100%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 5px 0;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
<div id="graficos_container">
<div id='one_graph'>
<div id="prueba">
<canvas class="grafico" id="bateria_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="bat_graf_btn">
</div>
<div id='two_graph'>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_graf_btn">
</div>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_full_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_full_graf_btn">
</div>
</div>
This kind of charts are responsive, for this reason I thought that putting it inside a container it will adapts, but the pie no... How can i do it?
Thank you very much.

Answer 1

Have you tried to add display: flex to .prueba class, it seems responsive now in your example.
#graficos_container {
height: 100%;
width: 100%;
background-color: #e0e0e0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#one_graph {
height: 500px;
width: 55%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
#prueba {
width: 90%;
display:flex;
}
#paquetes_graf {
height: auto;
width: 90%;
background-color: tomato;
}
#two_graph {
height: 500px;
width: 35%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
}
.single_two_graph {
height: 50%;
width: 100%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 5px 0;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
<div id="graficos_container">
<div id='one_graph'>
<div id="prueba">
<canvas class="grafico" id="bateria_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="bat_graf_btn">
</div>
<div id='two_graph'>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_graf_btn">
</div>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_full_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_full_graf_btn">
</div>
</div>