使用 React 的等高细节摘要答案

【问题标题】：Equal height of details' summary with React使用 React 的等高细节摘要
【发布时间】：2022-01-14 06:11:50
【问题描述】：

如何使用<DisclosureGroup> 之类的封闭组件将<Disclosure>s（包含<details>）组中<summary> 的高度设置为组中最高的<summary>？

详细了解问题的 CodeSandbox 可以在这里找到：https://codesandbox.io/s/details-summary-equal-height-d6fh7

【问题讨论】：

将 minHeight 添加到 summay
在哪里以及如何添加它？
stackoverflow.com/questions/2114757/css-equal-height-columns
是的，在无法打开的标签上确实如此。陷阱是，您可以混合其他内容。然后，关闭的细节的摘要将与打开的细节一样高。
这里的困难在于细节/摘要的使用，因为你不能真正使用弹性盒子或css网格属性来stretch你的<summary>。与使用语义 HTML 元素相比，您可以更成功地编写可以与网格 css 模型一起使用的自定义组件。

【解决方案1】：

这并不理想，但这是一种方法。基本上，如果您在<details> 中使用position: absolute; <div>，那么它不会占用空间。

section {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

details div {
  position: absolute;
}

summary {
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  background: lightblue;
}

<main>
  <section>
      <details>
          <summary>First Title</summary>
          <div>
              <p>Whateva</p>
          </div>
      </details>
      <details>
          <summary>Very long title at the second disclosure to show the problem</summary>
          <div>
              <p>
                Whateva<br/>
                a<br/>
                b<br/>
                c<br/>
                d<br/>
                e<br/>
                f<br/>
                g<br/>
                h<br/>
                i<br/>
                j
              </p>
          </div>
      </details>
      <details>
          <summary>Third title not as long as the second</summary>
          <div>
              <p>Whateva</p>
          </div>
      </details>
  </section>
</main>

【讨论】：