0

I have a details element inside a div container which has relative position. Inside the details element there is another div that has position absolute. What I am trying to achieve is a expandable div container and details as it opens to show the content.

I outlined the containers with different colored borders so its easier to see but I can't get the containers to stretch.

How can I achieve this?

Thank you.

#container {
  border: 1px solid red;
  position: relative;
  display: inline-block;
}

details {
  border: 1px solid black;
  height: fit-content;
  display: inline-block;
}

#content {
  position: absolute;
  width: 100%;
  height: fit-content;
}
<div id="container">
  <details>
    <summary>
      title
    </summary>
    <div id="content">
      some content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  </details>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • Let's go back to the beginning. Why are you using absolute position? Many times it's simply not necessary and makes your job more difficult. – isherwood May 02 '22 at 19:19
  • In fact, simply removing that seems to achieve your goal. – isherwood May 02 '22 at 19:20
  • it is necessary, believe me. the actual code is much more complex than this. – Cain Nuke May 02 '22 at 19:48
  • Then we have to leave it at that. If you care to provide more details we can probably help. – isherwood May 02 '22 at 20:02
  • I dont know what else can I tell you. I was already very clear. – Cain Nuke May 02 '22 at 21:11
  • You were clear in your request, which is a duplicate. You weren't clear on why absolute positioning is necessary. "Believe me" isn't much evidence. :) Happy coding. – isherwood May 02 '22 at 21:13
  • I didnt know you had to present evidence on why you have to write code... also, my question is about a DETAILS tag, which is not the same as a div container. – Cain Nuke May 02 '22 at 22:59

0 Answers0