Flex布局在Chrome等浏览器中无法自动调整及元素归位问题

核心问题原因 #

1. 你多次直接赋值element.style = "xxx"，这会彻底覆盖之前设置的所有行内样式——比如先设min-height:0，再设height:0，最后设visibility: collapse，前面的样式都会被冲掉，实际只生效了最后一个。
2. visibility: collapse是为表格元素设计的属性，在Chrome、Edge这类浏览器的flex子元素上，它只会隐藏元素视觉，但不会让元素脱离布局流，还是会占着位置；而Firefox对非表格元素的这个属性处理更接近display: none，这就是跨浏览器差异的根源。
3. 父flex容器（column方向）的高度由子元素总高度决定，既然隐藏的元素还占着位置，父容器自然不会收缩，剩下的元素也没法上移。

具体修复步骤 #

1. 改掉行内样式的错误设置方式

别直接给style属性赋值，要么逐个设置样式属性，要么用cssText批量写，避免样式被覆盖：

// 隐藏元素时这么写
const container = document.getElementById(strTagInputContainer);
container.style.minHeight = '0px';
container.style.height = '0px';
container.style.visibility = 'collapse';
// 或者用cssText一次性设置（二选一）
// container.style.cssText = 'min-height: 0px; height: 0px; visibility: collapse;';

2. 推荐用display: none实现真正隐藏

如果不需要保留隐藏元素的布局占位，直接用display: none让元素完全脱离布局流，这样父容器会自动收缩高度，剩余元素也会自动上移到顶部：

// 替换原来的判断逻辑
if (strInputName.substring(0, searchLen) !== strSearchName) {
    document.getElementById(strTagInputContainer).style.display = 'none';
} else {
    const container = document.getElementById(strTagInputContainer);
    container.style.display = 'flex'; // 恢复flex布局
    container.style.height = '50px';
    container.style.minHeight = '40px';
}

3. 删除没必要的load调用

你代码里的$(strTagInputContainer).load(...)是在重新加载元素内部内容，完全没必要，反而可能搞乱布局，直接删掉这部分代码就行。

4. 父容器的flex属性优化（可选）

确保父容器inputManageTableContainer没设固定高度，让它能根据子元素高度自动调整：

.inputManageTableContainer {
    display: flex;
    flex-direction: column;
    /* 如果需要最小高度就设min-height，别设固定height */
    min-height: 200px;
}

修正后的完整JS示例 #

for (let x = 1; x <= m_iDefaultNumRows; x++){
    const strInputNumber = x.toString().padStart(4, '0');
    const strTagInputContainer = m_strTagInputHead + strInputNumber + m_strTagRowContainer;
    const strTagInputName = m_strTagInputHead + strInputNumber + m_rowElementsTags.InputName;
    
    // 加个判断避免元素不存在报错
    const inputNameEl = document.getElementById(strTagInputName);
    if (!inputNameEl) continue;
    
    let strInputName = inputNameEl.textContent.trim(); // 合并首尾去空格
    
    const container = document.getElementById(strTagInputContainer);
    if (!container) continue;
    
    if (strInputName.substring(0, searchLen) !== strSearchName){
        container.style.display = 'none';
    } else {
        container.style.display = 'flex';
        container.style.height = '50px';
        container.style.minHeight = '40px';
    }
}
// 删掉原来的while循环和load调用，完全没用

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