form{ min-height: 50vh; transition: all 0.7s linear; display: flex; flex-direction: column; justify-content: space-evenly; border: 0 2px 0 0 solid black; width: 20rem; padding: 10%; margin:auto; flex-wrap: wrap; position: relative; background-color: #e9ac67; position: relative; } input{ height: 2rem; border: 2px solid black; } label{ text-transform: capitalize; } .sug-city{ list-style: none; font-size: 0.5rem; } ul{ list-style: none; } li{ border: black 2px solid; margin:0 }Cada vez que aparece la lista de sugerencias, la altura aumenta (lo que se esperaba), pero la posición del formulario también cambia. Quiero que la altura crezca verticalmente hacia abajo y no hacia arriba. Piensa en cómo funciona la barra de búsqueda de Google. Ese es el resultado final que quiero.
ul { max-height: 250px; overflow-y: scroll; }Pones tu elemento de lista dentro del mismo contenedor, por lo que expandir la lista también expandiría todo.
Puede poner su elemento de lista afuera y/o darle una posición absoluta. Los cambios mínimos se pueden encontrar aquí: codepen
Básicamente, envolví el campo de entrada en un envoltorio de posición relativa para mantener esa posición; luego cambié ul a position:absolute .
Este comportamiento se debe a que display:flex de su cuerpo y usted ha aplicado justify-content:space-evenly . Los cuales ajustan automáticamente el espacio disponible entre elementos. Cuando aparece la lista de sugerencias, aumenta el tamaño de su elemento seleccionado y ocupa más espacio en la pantalla que finalmente parece moverse hacia arriba.
Modifique su CSS de esta manera, esto resolverá su problema.
body { display: flex; flex-direction: column; align-items: center; position: relative; //So you can specify childrens' absolute position min-height: 100vh;font-family: 'Urbanist', sans-serif; text-transform: uppercase; font-size: 1.3rem; background-image: linear-gradient(to left top, #051937, #4d295a, #983461, #d2524d, #e98c27); } form { min-height: 50vh; transition: all 0.7s linear; display: flex; flex-direction: column; justify-content: space-evenly; border: 0 2px 0 0 solid black; width: 20rem; padding: 10%; margin:auto; flex-wrap: wrap; background-color: #e9ac67; } header { margin-top: 50px; } main { position: relative; top: 50px; }