Блог

кодовый набор

 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
}

 

Всякий раз, когда появляется список предложений, высота увеличивается(что и ожидалось), но положение формы также меняется. Я хочу, чтобы высота росла вертикально вниз, а не вверх. Подумайте о том, как работает панель поиска Google. Это конечный результат, которого я хочу.

Вы помещаете свой элемент списка в один и тот же контейнер, поэтому расширение списка также приведет к расширению всего.

Вы можете поместить свой элемент списка снаружи и/или указать ему абсолютную позицию. Минимальные изменения можно найти здесь: codepen

В основном я завернул поле ввода в относительно расположенную обертку, чтобы сохранить это положение; затем я изменил ul на position:absolute .

Попробуйте Это

 ul {
    max-height: 250px;
    overflow-y: scroll;
}
 

Такое поведение объясняется тем, что ваше тело display:flex и вы применили justify-content:space-evenly . Которые автоматически регулируют доступное пространство между элементами. Когда появляется список предложений, он увеличивает размер выбранного элемента и занимает больше места на экране, который в конечном итоге перемещается вверх.

Измените вас CSS таким образом, и это решит вашу проблему.

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

 

для определения высоты лучше использовать другие единицы измерения. устройство «vh» может создавать некоторые проблемы, особенно в мобильных устройствах.

  and also use 
 ul{
   overflow-y: scroll;
 }