Flexbox inside Details Summary

Question

I'm trying to place a flexbox which spans the full container width inside a Details-Summary block but cannot quite figure out how to set the width of the flexbox.

Here is a minimal example:

summary > div {
  background-color: orange;
  display: inline-flex;
  justify-content: flex-end;
  width: calc(100% - 1.32em); /* chrome */
  width: calc(100% - 1.37em); /* firefox */
}

<details>
  <summary>
    <div><div>Flex-Item Summary</div></div>
  </summary>
  Detail Text Here
</details>

CodePen Link

By setting the flexbox width to 100%, it (as expected) spans the entire summary container, thus placed on the next line. I was able to dynamically calculate the width with an arbitrary offset but it varies among user agents. Is there any way to make this browser-independent?

I've played around with psudo-elements (summary::after for FF and -webkit-details-marker for Chrome) but I couldn't get anywhere.

TIA

Answer 1

You don't need to set a width.

Just set the parent to display: flex and the div to flex-grow: 1. Now it will consume the free space, whatever that may be.

summary {
  display: flex;
  align-items: center; /* keeps arrow vertically centered */
  background-color: red;
}

summary > div {
  flex-grow: 1; /* consumes free space */
  display: inline-flex;
  justify-content: flex-end;
  background-color: orange;
}

<details>
  <summary>
    <div>
      <div>Flex-Item Summary</div>
    </div>
  </summary>
  Detail Text Here
</details>

codepen demo

More details here: Make div fill remaining *horizontal* space in flexbox