Why is details element expanding upwards when receiving the order attribute?

Question

I have a list of sections and some have a details element within. Now I need to change these sections order using flexbox, but when I use the order attribute, the details element expands upwards, and not to the bottom like usual.

All these sections are inside a flex display. Tried to change positions, display to grid, change the height of each section but nothing really works. I need to keep it expanding just to the bottom. Here an example, you can try expading the Test 5 and 7 details element:

.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>
<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>

You can note that, depending on the scroll position, it expands to different directions.

Anyone knows why this happens? How can I keep it expanding just to the bottom?

score 0 · Answer 1 · answered Jan 20 '23 at 07:42

Hello and have a good day. I have an idea it will solve it. Step-1: set the <details> to position: relative; + fixed width:30px; or whatever width you want.

Step-2: set the span and summary to position: absolute;. So we are able to control the expands

Expand to Downwards

details { height: 20px; position: relative; width: 100%;}
details[open] { height: 40px;}

details span {position: absolute; top: 20px;background-color: red;}
summary {background-color:blue; position: absolute; top: 0;}

<body>
  <details>
<summary>Test</summary>
<span>Trying to open this downwards</span>
    </details>
</body>

Expand to upwatds

Now let's change the position of the span and summary from top top bottom

details { height: 20px; position: relative; width: 100%;}
details[open] { height: 40px;}

details span {position: absolute; bottom: 10;background-color: red;}
summary {background-color:blue; position: absolute; bottom: 0;}

<body>
  <details>
                
    <span>Trying to open this upwards</span>
<summary>Test</summary>
    </details>
</body>

Applied your idea in my example and it still happens, Test 5 and 7 expands upward when they are at the beginning of the page. Would be interesting if the solution doesn't provide a fixed height to the content of the details element — Anuar Daher, Jan 20 '23 at 12:19
@AnuarDaher. Sorry that my idea did not work. I am not sure, but it may happen because the order property will create a disconnect between the visual presentation of content and DOM. I will keep my answer it may help someone else. Sorry again man. — ABDULAZIZ NOREDIN QADMOR, Jan 20 '23 at 13:37
thanks for your help. I understand that it may happen but must there be a way to overcome this behaviour :( — Anuar Daher, Jan 20 '23 at 14:28

Why is details element expanding upwards when receiving the order attribute?

1 Answers1