Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago
Mark Notton

`<details>` element with `display:contents` broken in Chrome 131?

I've been playing around with Chrome 131's latest release and noticed some interesting changes with <details> and <summary> elements. I wanted to share my findings and see if anyone else has encountered similar behaviour.

Two significant changes in how <details> elements work:
1. The <details> element can now accept display:flex and display:grid properties.
2. You can now target the details contents using this new pseudo selector: ::details-content. No more wrapper divs needed.

Here's a typical markup pattern I tend to work with:

<details open>
    <summary>Hello World</summary>
    <div class="details-content">
        <p>...</p>
    </div>
</details>


I have a use case for setting the <details> element display property to contents so that I can lay out a group of details elements into a sort of responsive tabbable UI.

When I do this, Chrome seems to ignore the display:contents property entirely. As far as the dev tools are concerned, it's applied correctly, but just ignores it and resolves to the browser's display:block behaviour; and reports it as such too.

My solution:

Conditionally duplicate the grid-column property for browsers which have support for the new pseudo element selector:

details {
  > .details-content {
      margin-block-start: 1rem;
      grid-row: 2; 
      grid-column: 1 / -1;
  }
  
  @supports selector(::details-content) {
    &::details-content {
      grid-column: 1 / -1;
    }
  }
}


I've put together a CodePen demo to show what I mean. Try previewing this in both Chrome 131 and Firefox; and toggle the &::details-content {... fix: https://codepen.io/marknotton/pen/RwXXodo?editors=1100

Context: https://developer.chrome.com/release-notes/131

Do you think this is intended behaviour or a bug?
Chrome for Developers
Chrome 131  |  Release notes  |  Chrome for Developers
CSS Highlight Inheritance is changing, more CSS styling for the details element, easier print layout with page margin boxes, and more.
Was this page helpful?