动态添加表单元素后下方内容隐藏，需调整窗口尺寸才显示的问题排查

现象描述 #

• 自研表单模块内置操作按钮，点击后可动态向表单区域追加文本输入框
• 异常表现：新增输入框后，表单所在容器不会自动撑开高度，导致面板下方的操作按钮被遮挡、无法正常查看；只有手动调整浏览器窗口尺寸时，容器才会重新计算高度，所有内容恢复正常显示
• 该问题可通过本地代码环境稳定复现

核心提问 #

请问这是否为CSS相关问题？如果是，可能是哪些元素的样式设置导致的？

各部分实现代码 #

表单结构HTML #

<div id="single-form-next-prev" class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
    <h3 class="text-center multisteps-form__title">Skills</h3>
    <div id="form-content-1" class="multisteps-form__content">
        <div id="input-grp-single-1" class="form-row mt-4">
            <div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill 1"></div>
        </div>
        <br>
        <button id='addButton' class="btn btn-outline-primary text-truncate float-none float-sm-none add-another-btn" data-bss-hover-animate="pulse" type="button">Add Skill<i class="fas fa-plus-circle edit-icon"></i></button>
        <div id="next-prev-buttons" class="button-row d-flex mt-4">
            <button class="btn btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button>
            <button class="btn btn btn-primary ml-auto js-btn-next" type="button" title="Next">Find Results</button>
        </div>
    </div>
</div>

动态新增表单项的jQuery逻辑 #

$(document).ready(function(){
    let id = 1;
    $('#addButton').click(function() {
        $('#input-grp-single-'+id).after('<div id="input-grp-single-'+(id+1)+'" class="form-row mt-4"> <div class="col-12"><input class="form-control multisteps-form__input" type="text" placeholder="Skill '+(id+1)+'"></div></div>');
        id++;
    });
});

多步表单核心CSS样式 #

.multisteps-form__form {
   position: relative;
}

.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.multisteps-form__panel.js-active {
   height: auto;
   opacity: 1;
   visibility: visible;
}

.multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.multisteps-form__panel[data-animation="scaleIn"].js-active {
   transition-property: all;
   transition-duration: 0.2s;
   transition-timing-function: linear;
   transition-delay: 0s;
   -webkit-transform: scale(1);
   transform: scale(1);
}

问题成因说明 #

该异常属于CSS样式与浏览器重排机制共同导致的问题，核心诱因来自multisteps-form__panel类的样式配置：

• 所有步骤面板默认使用绝对定位，非激活状态下高度为0、完全隐藏，仅当被加上js-active类激活时，才会切换为height: auto的可见状态
• 由于面板本身带scale缩放过渡动画，浏览器仅会在两类时机重新计算面板的内容高度：一是面板从非激活切为激活状态时，二是视口尺寸发生变化触发全局重排时
• 动态插入DOM节点的操作，没有触发绝对定位面板的高度重算逻辑，就会出现旧高度值残留、下方内容被遮挡的问题；手动调整窗口时因为触发了全局重排，浏览器才会重新计算正确的容器高度。

内容的提问来源于stack exchange，提问作者Marc-9