如何调整下拉内容避免重叠元素？实现容器与内容自适应

修改后的完整代码 #

HTML（移除内联样式，结构更清晰）

<div class="card">
  <div class="table-wrapper">
    <span>Where do we send your order?</span>

    <div class="direcciones-container">
      <div class="direcciones-barracuda">
        <span>SOME TEXT</span>
      </div>
    </div>
    
    <div id="mostrarMapaContainer">
      <input type="checkbox" id="mostrarMapaCheckbox" onclick="mostrarMapa()">
      <label for="mostrarMapaCheckbox">New Adress</label>
      
      <div id="mapa" class="mapa-container">
        <input type="text" id="direccionCompleta" placeholder="Enter full address">
        <!-- 模拟地图区域 -->
        <div class="map-placeholder"></div>
        
        <input type="text" id="referencia" placeholder="References">
        
        <div class="input-group">
          <input type="text" id="nota" placeholder="Notes">
          <input type="text" id="celular" placeholder="Phone">
        </div>
      </div>
    </div>

    <button id="confirmarBtn" onclick="confirmar()">CONFIRM</button>
  </div>
</div>

CSS（优化布局，确保适配与撑开）

.card {
  padding: 1rem;
}

.table-wrapper {
  width: 100%;
  box-sizing: border-box;
  /* 无固定高度，自动适配内部内容 */
}

.direcciones-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.direcciones-barracuda {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  transition: border-color 0.3s;
}

.icono-ubicacion {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.direccion-info {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}

.direccion-info span {
  display: block;
}

.direcciones-barracuda.selected {
  border-color: #E05228;
}

.mapa-container {
  display: none;
  padding: 10px;
  margin-top: 10px;
}

#mostrarMapaContainer {
  clear: both;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 1rem; /* 和按钮拉开间距 */
}

.map-placeholder {
  height: 200px;
  background-color: #f0f0f0;
  margin: 10px 0;
}

#mapa input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}

.input-group {
  display: flex;
  justify-content: space-between;
  gap: 4%; /* 用gap代替margin，避免溢出 */
}

.input-group input {
  width: 48%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 0;
}

#confirmarBtn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #E05228;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JS（简化逻辑，移除多余操作）

function mostrarMapa() {
  const mapaContainer = document.getElementById("mapa");
  const checkbox = document.getElementById("mostrarMapaCheckbox");

  mapaContainer.style.display = checkbox.checked ? "block" : "none";
  // #nota在mapa容器内，随父元素显示/隐藏，无需单独设置
}

function seleccionarDireccion(elemento, direccion, ciudad) {
  document.querySelectorAll('.direcciones-barracuda').forEach(elem => {
    elem.classList.remove('selected');
  });
  elemento.classList.add('selected');
  alert(`Dirección seleccionada:\n${direccion}\n${ciudad}`);
}

function confirmar() {
  alert("Pedido confirmado");
}

关键修改点说明 #

• 父容器自适应：所有父容器（.table-wrapper、#mostrarMapaContainer）均不设置固定高度，展开的#mapa保持在文档流中，父容器会自动计算高度；给#mostrarMapaContainer添加margin-bottom，确保和下方按钮不会挤在一起。
• 内部元素适配：所有输入框均设置box-sizing:border-box，避免宽高超出容器；flex布局用gap控制双输入框的间距，比margin更稳定；移除内联样式，统一到CSS，方便维护。

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