使用flex order属性后details元素向上展开的原因与解决方法

问题 #

在使用Flexbox的order属性调整一组包含<details>的<section>元素排列顺序后，出现了<details>元素向上展开而非默认向下的异常情况，且展开方向会随页面滚动位置变化。尝试过调整元素位置、切换Grid布局、修改<section>高度等方法，均未解决问题。

相关代码示例 #

CSS代码

.sections {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

section:nth-child(3) {
    order: 6;
}
section:nth-child(4) {
    order: 3;
}
section:nth-child(5) {
    order: 4;
}
section:nth-child(6) {
    order: 7;
}
section:nth-child(7) {
    order: 5;
}
section:nth-child(8) {
    order: 10;
}
section:nth-child(9) {
    order: 9;
}
section:nth-child(10) {
    order: 8;
}
section:nth-child(11) {
    order: 11;
}

HTML代码

<html>
<body>
  <div class="sections">
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it
      </p>
    </section>
    <section>
      <details>
        <summary>Test 2</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it
      </p>
    </section>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it
      </p>
    </section>
    <section>
      <details>
        <summary>Test 5</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <details>
        <summary>Test 6</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <details>
        <summary>Test 7</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <details>
        <summary>Test 8</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <details>
        <summary>Test 9</summary>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
      </details>
    </section>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it
      </p>
    </section>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry. Lorem Ipsum has been the<br> industry's standard dummy text ever since the 1500s,
        <br>when an unknown printer took a galley of type and scrambled it
      </p>
    </section>
  </div>
</body>
</html>

问题原因 #

浏览器对<details>的展开方向有自动适配逻辑：默认优先向下展开，但如果判断视口下方空间不足，就会改为向上展开。当使用Flexbox的order属性调整元素顺序时，元素的渲染位置和DOM中的文档流位置完全脱节，浏览器无法正确识别<details>在布局中的实际下方空间，误判为空间不足从而触发向上展开；页面滚动时，视口与元素的相对位置变化，导致浏览器的空间判断结果改变，展开方向也随之变化。

另外，Flex容器的子元素默认是flex item布局上下文，这种上下文会干扰<details>的原生定位逻辑，进一步加剧了方向判断的错误。

解决方法 #

通过强制<details>的定位上下文，让浏览器基于元素自身而非视口判断展开方向，具体方案如下：

修改后的CSS代码 #

.sections {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* 让section回到块级布局上下文，消除flex item对内部details的干扰 */
section {
  display: block;
}

/* 强制details的展开内容以自身为基准定位 */
details {
  position: relative;
}

/* 确保details展开时内容始终在summary下方 */
details[open] summary ~ * {
  position: static;
}

/* 原有order规则保持不变 */
section:nth-child(3) {
    order: 6;
}
section:nth-child(4) {
    order: 3;
}
section:nth-child(5) {
    order: 4;
}
section:nth-child(6) {
    order: 7;
}
section:nth-child(7) {
    order: 5;
}
section:nth-child(8) {
    order: 10;
}
section:nth-child(9) {
    order: 9;
}
section:nth-child(10) {
    order: 8;
}
section:nth-child(11) {
    order: 11;
}

方案说明 #

1. 设置<section>为display: block：将Flex子元素的布局上下文恢复为标准块级，让内部的<details>回到正常的文档流中，浏览器能正确识别其周边空间。
2. 给<details>添加position: relative：强制展开内容以<details>自身为定位基准，避免浏览器基于视口空间误判展开方向。
3. 针对[open]状态的<details>设置内容为position: static：确保展开内容始终跟随在<summary>下方，不会出现向上偏移的情况。

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