0👍
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>
Source:stackexchange.com