details element seems to ignore display flex or grid?

Question

This seems quite bizarre to me. You can see that we have a simple details element which should by all rights run horizontal. But it does not. grid also seems to not work.

Why? I am not seeing anything in the spec about the layout model being any different for these elements.

details {
	display: flex;
	flex-direction: row;
}

<details open>
	<summary>foo</summary>
	<div>bar</div>
	<div>baz</div>
</details>

Rossiya

avoid it on special element because they aren't designed to be flexbox or Grid container. Related : https://mcmap.net/q/37033/-flex-grid-layouts-not-working-on-button-or-fieldset-elements/8620333 / https://mcmap.net/q/37027/-why-can-39-t-lt-fieldset-gt-be-flex-containers/8620333 (same issue with other elements) – Lakeesha

Answer 1

You cannot overide the display behavior of a details element, but if the idea is to get children on a single line , then you can use display or float on the children :

a few example to test through different browsers before use.

borders, colors and background added for visual testing purpose

details {clear:both;margin:2em;border:solid;color:red;}
details.flkid {overflow:auto;/* to deaal with floatting children*/}
summary {background:yellow;}
details > *{padding:0 1em;color:green}
details.flkid > *{float:left;}
details.ib > *{display:inline-block;}
details.tbcl > *{display:table-cell;}
/* and so on with inline-table,inline-flex,inline-grid */

<details class="flkid" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>
<details class="ib" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>
<details class="tbcl" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>

Disclaimer : the following snippets stands here only for the fun and should NOT be seen as a solution even if it seems to work in a few browsers :

div {
  display: grid;
  grid-template-columns: repeat(5, auto);
}

details {
  display: contents/* removed from the flow, so the grid div becomes the parent */
}

div {
  border: solid;
  margin: 2px
}

details[open]> :not(summary) {
  /* hide them from the flow except for summary */
  position: absolute;
  right: 100%;
}

div[class] {
  grid-row:  span 2;
}

<div>
  <details><!-- attribute open removed you can add it if you want it closed at first :( -->
    <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div class>bazbazbazbazbazb</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
  </details>
</div>

Hooked

Interesting - cool workarounds. What I haven't been able to find is any official or even semi-official docs about this behavior. So that's what I'm pretty confused by – Rossiya

@GeorgeMauer just added a tricky snippet example with display:contents to keep the toggle effect of detail, but my advise would be to use javascript and drop details aside if you want a grid or flex display. – Hooked

Answer 2

You can solve it by adding the solution below.

.flex {
  display: flex;
  flex-direction: row;
}

.flex>* {
  padding: 5px;
}

<details open>
  <summary>foo</summary>
  <div class="flex">
    <div>bar</div>
    <div>baz</div>
  </div>
</details>

Mcbride

well no...that doesn't make the contents of details to be flex, just the contents of this .flex class you created, that's no different than any other usage of flexbox. foo is still on its own. Either way the question is more about why this behavior happens and where it is spec'ed – Rossiya

Answer 3

The question is a little old, but still relevant. I've just been confronted with it and ended up using a custom HTML tag and a line of javascript to overcome the problem.

[...document.querySelectorAll(`custom-summary`)].forEach(e => e.onclick = () => e.closest(`custom-details`).toggleAttribute(`open`));

custom-details > custom-summary {
    cursor: pointer;
    display: list-item;
    list-style-position: inside;
    list-style-type: disclosure-closed;
}
custom-details[open] > custom-summary {
    list-style-type: disclosure-open;
}
custom-details:not([open]) > *:not(custom-summary) {
    display: none;
}




custom-details, details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    align-items: center;
    margin-bottom: 2rem;
}

<details>
  <summary>Normal details</summary>
  <p>Content #1</p>
  <p>Content #2</p>
  <p>display:grid not working</p>
</details>


<custom-details>
  <custom-summary>Custom details</custom-summary>
  <p>Content #1</p>
  <p>Content #2</p>
</custom-details>

Sammysamoan

Answer 4

Despite this question is quite old, I found some quite hacky workaround to place summary and dropdown content into one horizontal axis. The caveat is the width of <summary> element should be fixed, but in my case (<summary> is an iconic button that is 24px in width and height) it works perfectly. So you apply position: absolute to <summary> and adjust all the other things by paddings. My case below, maybe it helps someone.

/* .panel is my <details class="panel"> */
.panel { 
  position: fixed; /* just my case, may be relative or absolute */
  left: 0;
  top: 100px;
  padding: 34px 10px 10px 34px; /* top and left padding are 10px + <summary>'s size */
  background: #ddd;
}

.panel summary {
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute; /* this is the trick */
  left: 10px; /* imitate padding */
  top: 10px; /* imitate padding */
}

.panel summary::marker,
.panel summary::-webkit-details-marker {
  display: none;
  content: none; /* remove triangle (my case, it is button-like) */
}

.panel[open] {
  /* the 2nd part of the trick
   * remove button's size from top padding when details are open,
   * hence left padding remains the same.
   * so visually it looks like placed into one horizontal row
   * with details' dropdown content. 
   */
  padding-top: 10px;
}

Introspection