¿Cómo establecer la altura de <summary> en un grupo de <Disclosure> s (lo que contiene los <details> ) al <summary> más alto del grupo usando un componente envolvente como <DisclosureGroup> ?
Puede encontrar un CodeSandbox para obtener el problema en detalle aquí: https://codesandbox.io/s/details-summary-equal-height-d6fh7
No es lo ideal, pero aquí hay una forma de hacerlo. Básicamente si position: absolute; el <div> dentro de <details> entonces no ocupa espacio.
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>