Prevent change in position of div with height increase-CodePudding

codepen

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
}

Whenever the suggestion list appears, the height increases(which was expected), but the position of the form also changes. I want the height to grow vertically downwards and not upwards. Think of how Google's search bar works. That's the end result I want.

CodePudding user response：

Try This

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

CodePudding user response：

You put your listelement inside the same container - so expanding the list would also expand everything.

You can put your listelement outside and/or give it an absolute position. Minimal changes can be found here: codepen

Basically I wrapped the inputfield in a relative-positioned wrapper to keep that position; then I changed ul to position:absolute.

CodePudding user response：

This behaviour is because your body's display:flex and you have applied justify-content:space-evenly. Which automatically adjust the available space between elements. When the suggestions' list appears, it increases the size of your select element and occupies more space on the screen which eventually appears to move upwards.

Modify you CSS like this, this will solve your problem.

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

CodePudding user response：

 it is better use another Units for declaring height.
 "vh" unit can make some problems specially in mobile devices.

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