Элемент деталей, кажется, игнорирует показ гибкости или сетки?

Question

Мне это кажется довольно странным. Вы можете видеть, что у нас есть простой элемент данных, который должен по всем правам работать горизонтально. Но это не так. grid также, похоже, не работает.

Почему? Я не вижу в спецификации ничего о том, что модель макета отличается для этих элементов.

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

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

Answer 1

Вы не можете переопределить поведение отображения элемента данных, но если идея состоит в том, чтобы получить дочерние элементы в одной строке, тогда вы можете использовать display или float для дочерних элементов:

несколькоПример для проверки через разные браузеры перед использованием .

добавлены границы, цвета и фон для визуального тестирования

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>

Отказ от ответственности: следующие фрагменты обозначены здесь только для развлечения и НЕ должны рассматриваться как решение, даже если оно работает в нескольких браузерах:

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>

Answer 2

Вы можете решить эту проблему, добавив решение ниже.

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