Contact form 7 not expanding on a fixed parent div

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