CODEWITHSUNDEEP
htmlcssflexboxhtml-tag-details
Sam Coutteau
Sam Coutteau

Reputation: 417

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

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.

Upvotes: 1

Views: 808

Answers (4)

jon
jon

Reputation: 1808

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

Upvotes: 0

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 1

lost you
lost you

Reputation: 111

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>

Upvotes: 0

Casper Kuethe
Casper Kuethe

Reputation: 1130

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

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

Upvotes: 1

Related Questions