Equal height of details' summary with React

Question

How to set the height of <summary> in a group of <Disclosure>s (what contains the <details>) to the tallest <summary> of the group using an enclosing component like <DisclosureGroup>?

A CodeSandbox to get the problem in detail can be found here: https://codesandbox.io/s/details-summary-equal-height-d6fh7

https://stackoverflow.com/questions/2114757/css-equal-height-columns — Rocky Sims, Dec 09 '21 at 12:21
Yes, that's true on tags that can't be opened up. The pitfall is, that you can blend in additional content. And then, the summary of a closed detail would be as high as an opened detail. — Sommereder, Dec 09 '21 at 12:24
The difficulty here is the use of details/summary, as you can't really use flexbox or css grid properties to `stretch` your `
`. Rather than using the semantic HTML elements, you would have greater success writing custom components that you could work with the grid css model. — Steve -Cutter- Blades, Dec 09 '21 at 13:04

score 0 · Answer 1 · answered Dec 09 '21 at 13:15

It's not ideal but here is one way to do it. Basically if you position: absolute; the <div> inside <details> then it doesn't take up space.

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>

Equal height of details' summary with React

1 Answers1