This is a puzzle, rather than a solution. I publish this here in hopes that a web search engine crawls this article, someone finds it, knows the answer, and takes a moment to tell me. Will you please be that person?

Problem

I have recently become enamored by the HTML 5 <details> element. I like that it allows me to elide certain details on a page until the reader wants to read them. I use it to make my pages more easily skimmed, hoping that that confers some benefit to the reader. I’m trying to be nice and hoping that it helps convert some readers into customers. (I have to feed my family.)

The structure of a <details> element is this:

<details>
  <summary>A summary that readers always see.</summary>
  [... various HTML elements that the reader doesn't see until they click on the summary, such as <p>s ...]
</details>

As you can imagine, I think of the content inside the <details> element as text like any other on the page, so I’d like to style it similarly. Routinely, I use Flexbox’s gap property to create interparagraph vertical spacing throughout the document. This works as I’d expect in general, but not inside a <details> element.

If I style the <details> element as flex, then the gap property doesn’t apply to the children of this element. Instead, I have to do this:

<details>
  <summary>A summary that readers always see.</summary>
  <section class="the-details">
      [... various HTML elements that the reader doesn't see until they click on the summary, such as <p>s ...]
  </section>
</details>

If I style section.the-details as flex, then the gap property applies to its children as I’d expect.

Why?

I’ve provided an example with Codepen that illustrates the problem.

If you know why this happens, then please tell me. Scroll down to see various ways to contact me.

Many thanks.