I am making a web page with html, css and django in which news can be created. In the part of the news creation, when expanding the textarea, everything goes out of the border instead of expanding. The idea is that expanding the textarea also expands the box. The red borders is just for now to see how much each thing occupies!
And here I leave the css:
.containerForm {
display: block;
width: 550px;
margin: auto;
margin-top: 20px;
height: 380px;
padding: 15px 90px 90px 90px;
border: 1px solid red;
background-color: rgba(201, 201, 201, 0.205);
font-family: 'Fjalla One', sans-serif;
font-weight: 100 normal;
letter-spacing: 1px;
}
.containerForm h4 {
border: 1px solid red;
text-align: center;
}
.form-group {
display: flex;
align-items: center;
margin: auto;
padding: 10px;
}
.form-group input {
font-size: 16px;
width: 300px;
}
.form-group textarea {
font-size: 12px;
width: 300px;
resize: vertical;
}
.form-group label {
border: 1px solid red;
width: 100px;
}
.form-controlPost {
display: block;
margin: auto;
padding: 20px;
border: 1px solid red;
}
.button-newPost {
display: block;
margin: auto;
width: 150px;
height: 25px;
background-color: rgb(60, 214, 60);
font-size: 16px;
border: none;
border-radius: 50px;
}
You are effectively setting the .containferForm to a fixed height. If you want it to be at least that size, you would have to change it to min-height, and it will grow as its elements expand.