如何避免div高度增加时位置变动，实现内容垂直向下扩展效果

问题原因 #

1. 表单设置了justify-content: space-evenly，子元素数量或高度变化时，该属性会重新均匀分配垂直方向的剩余空间，导致整体布局上移
2. 建议列表作为表单的普通子元素插入，会直接撑开表单高度，若表单原本处于垂直居中状态，高度增加会向上下同步延伸，视觉上表现为向上偏移
3. 原代码中border: 0 2px 0 0 solid black写法不符合规范，边框样式不会生效，原代码重复声明了两次position: relative，属于冗余代码。

解决方案 #

方案1：建议列表保留在表单流内，仅向下撑开高度

修改表单的flex对齐规则，让内容从上到下排列，新增内容只会向底部延伸：

form{
    min-height: 50vh;
    transition: all 0.7s linear;
    display: flex;
    flex-direction: column;
    /* 替换space-evenly为flex-start，内容从上往下堆叠 */
    justify-content: flex-start;
    /* 修正边框写法 */
    border-right: 2px solid black;
    width: 20rem;
    padding: 10%;
    /* 仅保留水平居中，顶部设置固定边距，避免高度变化时上下偏移 */
    margin: 2rem auto 0;
    flex-wrap: wrap;
    position: relative;
    background-color: #e9ac67;
}
/* 给表单内的原有子元素添加上下边距，替代原space-evenly的间距效果 */
form > label, form > .input-wrapper {
    margin: 0.8rem 0;
}

方案2：完全模拟谷歌搜索交互，建议列表悬浮不撑开表单（更推荐）

将建议列表设置为绝对定位，脱离正常文档流，完全不影响表单的高度和位置：

1. 先给输入框外层套一个相对定位的容器

<div class="input-wrapper">
  <label>城市</label>
  <input type="text" name="city">
  <ul class="sug-city">
    <!-- 建议列表内容 -->
  </ul>
</div>

2. 新增对应CSS规则

.input-wrapper{
    position: relative;
    margin: 0.8rem 0;
}
input{
    height: 2rem;
    border: 2px solid black;
    width: 100%;
    /* 避免边框撑宽输入框 */
    box-sizing: border-box;
}
.sug-city{
    list-style: none;
    font-size: 0.5rem;
    position: absolute;
    /* 定位到输入框正下方 */
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    z-index: 10;
}
ul{
    list-style: none;
}
li{
    border: black 2px solid;
    margin:0
}

内容的提问来源于stack exchange，提问作者Shahid Alam