Details element, fit to content whilst inside a flex box, even when collapsed-CodePudding

When placing an <details> element inside a <div> with display: flex the width of the <details> element will equal the <summary> element when collapsed and will grow when uncollapsed to fit its content.

Example:

.flex {
  display: flex;
}

details {
  background-color: red;
}

<div >
  <details>
    <summary> short </summary>
    <p> very long and detailed description </p>
  </details>
</div>

What I want is that the width of the <details> element is consistent regardless if it is collapsed or not. Ideally such that it fits its content.

In short how do I prevent it from shrinking when collapsed.

CodePudding user response：

You can achieve this by setting a fixed width on the details element.

details {
  background-color: red;
  width: 50px;
}

CodePudding user response：

You can try code below: Hope helpful for you

.flex {
  display: flex;
}

details {
  background-color: green;
  flex: 1;
}

<div >
  <details>
    <summary> short </summary>
    <p> very long and detailed description </p>
  </details>
</div>