如何让两个并排的HTML <details>元素展开时互不影响位置

数据老陈

2026-7-11

解决两个

元素并排展开时的移位问题

你的问题出在两处：一是flex布局属性值错误，二是未限制

元素的宽度，导致第一个元素展开时挤压第二个元素的空间，引发移位。

问题分析

原代码里的flex-direction: center是无效值，flex-direction的有效值为row/column/row-reverse/column-reverse，默认就是row，这个属性可以直接删掉。
默认状态下，flex容器内的子元素会根据内容自动调整宽度，当第一个
展开后，内容增多会挤压第二个元素的空间，导致它移位到第一个元素的summary末尾。

解决方案

给每个

元素设置固定基础宽度、平分空间规则或最小宽度限制，确保展开时不会互相挤压。

方案1：固定比例宽度（适合内容长度稳定的场景）

<div style="display:flex; column-gap: 20px">
  <details style="flex: 0 0 45%;">
    <summary>Item 1</summary>
    This is a long summary. It's actually even longer.
  </details>
  <details style="flex: 0 0 45%;">
    <summary>Item 2</summary>
    This is another long summary. It's actually even longer.
  </details>
</div>

flex: 0 0 45%表示：元素不放大、不缩小，基础宽度占容器的45%，两个元素加起来占90%空间，剩余部分由间隙和留白填充。

方案2：自适应平分宽度（适合响应式场景）

<div style="display:flex; column-gap: 20px">
  <details style="flex: 1;">
    <summary>Item 1</summary>
    This is a long summary. It's actually even longer.
  </details>
  <details style="flex: 1;">
    <summary>Item 2</summary>
    This is another long summary. It's actually even longer.
  </details>
</div>

flex: 1让两个元素平分容器可用空间（扣除间隙宽度），无论容器尺寸如何变化，两个元素始终各占一半，展开时不会挤压对方。

方案3：最小宽度限制（适合内容宽度不确定的场景）

如果不想固定比例，可给

设置最小宽度，避免被挤压到过小：

<div style="display:flex; column-gap: 20px">
  <details style="min-width: 200px;">
    <summary>Item 1</summary>
    This is a long summary. It's actually even longer.
  </details>
  <details style="min-width: 200px;">
    <summary>Item 2</summary>
    This is another long summary. It's actually even longer.
  </details>
</div>

以上三种方案都能让第二个

元素在第一个展开时保持原位置，可根据实际场景选择使用。

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