Contact form 7 not expanding on a fixed parent div - css

Question

The div containing the CF7 is hidden until the user click on an icon, then the icon it's replaced with one with another color in the right bottom corner of the form, so Im using a fixed div for that. The problem is that when an error/success message appears the elements move outside of the form (and of the viewport), I need the form to expand in order to see all the elements or a solution for that.
My CF7
My CF7 after an error/success message
My relevant code:
/*Div for the CF7*/
#div-mail {
display: none;
position: fixed;
bottom: 4%;
right: 3%;
}
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
height: 286px;
}
/*First icon*/
#img-mail {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
}
/*second icon*/
#img-mail-active {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
display: none;
z-index: 1;
}

Answer 1

you need to change the height with min-height like this :
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
min-height: 286px;
}

Answer 2

I had to deal with something like this recently. Basically, I wrote a function to adjust the height of my form based on the invalid trigger.
$(".wpcf7").on('wpcf7:invalid', function(event){
adjustHeight();
});
For the adjustHeight() function, I did something like this for wider screens.
function adjustHeight() {
if ($(window).width() > 640){
if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
$('body').find('.contact-container').css('height', '2500px');
} else {
$('body').find('.contact-container').css('height', '2200px');
}
}
}
Not the most elegant solution, but it worked.