细节元素似乎忽略了显示 flex 或网格？

Question

这对我来说似乎很奇怪。你可以看到我们有一个简单的 details 元素，它应该是水平运行的。但事实并非如此。grid似乎也行不通。

为什么？我没有看到规范中关于这些元素的布局模型有任何不同的任何内容。

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

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

Answer 1

您可以通过添加以下解决方案来解决它。

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