类谷歌People also ask模块开发：父元素justify-content样式丢失问题

问题根源分析 #

1. 无效CSS选择器：.duvidas-etec .duvidas-etec.expandido 是后代选择器，页面中不存在嵌套的.duvidas-etec元素，完全不会生效。
2. Flex布局结构冲突：.duvidas-etec默认是flex-direction: row，展开后内部混入块级元素.resposta，破坏Flex布局逻辑，导致justify-content失效。
3. JS与CSS样式冲突：JS直接修改resposta.style.display，覆盖了CSS中通过max-height实现的过渡逻辑，干扰布局稳定性。
4. 动态替换元素遗漏样式：若你通过JS创建新div替换原有元素，未复制原元素的display: flex、justify-content等核心样式，会直接导致新元素丢失布局属性。

修复步骤 #

1. 清理无效CSS并优化Flex布局 #

移除无效选择器，调整容器方向并拆分头部与内容区域：

/* 移除以下无效选择器 */
/* .duvidas-etec .duvidas-etec.expandido{
    justify-content: space-between;
} */

/* 调整主容器为垂直Flex布局 */
.duvidas-etec {
    background-color: #D9D9D9;
    width: 44vw;
    height: 2.5vw;
    margin-top: 1.5vw;
    margin-left: 2.7vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    filter: drop-shadow(grey 0.6px 0.6px 1.5px);
    overflow: hidden;
    transition: height 0.3s ease-out;
}

/* 新增头部容器，保持水平两端对齐 */
.duvida-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5vw;
}

/* 优化展开状态样式 */
.duvidas-etec.expandido {
    height: 150px; 
    transition: height 0.5s ease-in;
}

/* 修复回答区域布局，避免破坏容器结构 */
.resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    width: 100%;
    padding: 0 0.5vw;
}

.duvidas-etec.expandido .resposta {
    max-height: 1000px; 
    transition: max-height 0.5s ease-in;
    margin-top: 1vw;
}

.resp{
    width: 90%;
    margin: 0;
}

2. 调整HTML结构，拆分头部与内容 #

将每个.duvidas-etec内的头部元素统一包裹：

<div class="duvidas-etec">
  <div class="duvida-header">
    <p class="numero">1</p>
    <p class="texto-caixa-duvida">DUVIDA</p>
    <img src="assets/img/Group 2.png" class="seta-baixo" onclick="toggleResposta(this)">
  </div>
  <div class="resposta">
    <p class="resp">Sou um texto muito convincente sobre esse assunto aqui que voce perguntou</p>
  </div>
</div>

3. 优化JavaScript逻辑，统一用类控制状态 #

移除直接修改display的代码，完全通过类切换实现展开/收起：

function toggleResposta(element) {
  const duvidasEtec = element.closest('.duvidas-etec');
  duvidasEtec.classList.toggle('expandido');
}

4. 动态替换元素的额外修复 #

若你确实需要通过JS创建新div替换原有元素，需确保新元素：

• 复制原元素的所有类名（如duvidas-etec）
• 保留与原元素一致的内部结构（包含.duvida-header和.resposta）

示例代码：

// 替换目标元素
const target = document.querySelector('.duvidas-etec');
const newDiv = document.createElement('div');
// 复制类名和内部结构
newDiv.className = target.className;
newDiv.innerHTML = target.innerHTML;
// 执行替换
target.parentNode.replaceChild(newDiv, target);

内容的提问来源于stack exchange，提问作者João Victor Silva de Macedo