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

Question

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 class="flex">
  <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.

score 0 · Answer 1 · answered Apr 18 '22 at 08:53

0

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

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

answered Apr 18 '22 at 08:53

Casper Kuethe

1,070
8
13

score 0 · Answer 2 · answered Apr 18 '22 at 08:54

You can try code below: Hope helpful for you

.flex {
  display: flex;
}

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

<div class="flex">
  <details>
    <summary> short </summary>
    <p> very long and detailed description </p>
  </details>
</div>

score 0 · Answer 3 · answered Apr 18 '22 at 18:21

0

Specify a flex-basis on details.

.flex {
  display: flex;
}

details {
  background-color: red;
  flex-basis: 50%;
}

<div class="flex">
  <details>
    <summary> short </summary>
    <p> very long and detailed description </p>
  </details>
</div>

answered Apr 18 '22 at 18:21

Kameron

10,240
4
13
26

score 0 · Answer 4 · answered Apr 16 '23 at 05:36

0

solution, you need min 1 li

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

so when you will put flex on summary , you will have a arrow

answered Apr 16 '23 at 05:36

jon

1,494
3
16
29

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

4 Answers4