Limit height of collapsed accordion segments Bootstrap 5 Vue3

Question

I'm building a web application using Vue3 and bootstrap 5. But I think this question only concerns bootstrap. What I want to do is limit the height of the collapsed accordion segment so that it doesn't kick the other segments too low when its content is long.

What I tried was adding max-height and Overflow: auto to the class .collapsing and I have added "collapsing" to the class of the accordion but then the accordion scrolls to that height and jumps after a second to fully unfold. In the node_modules bootstrap folder, I looked at _accordion.scss and changed "overflow-anchor" to auto, but nothing changed.

.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

In this example file, I just took the accordion example from bootstrap (under "Flush"), so my vue file looks like this:

<template>
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne"
          aria-expanded="false"
          aria-controls="flush-collapseOne"
        >
          Accordion Item #1
        </button>
      </h2>
      <div
        id="flush-collapseOne"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder<br />this must be long <br />this must be long <br />this
          must be long <br />this must be long <br />this must be long
          <br />this must be long <br />this must be long <br />this must be
          long <br />this must be long(thats what she said) <br />
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo"
          aria-expanded="false"
          aria-controls="flush-collapseTwo"
        >
          Accordion Item #2
        </button>
      </h2>
      <div
        id="flush-collapseTwo"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder content for this accordion, which is intended to
          demonstrate the <code>.accordion-flush</code> class. This is the
          second item's accordion body. Let's imagine this being filled with
          some actual content.
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "stackoverflowquestion",
};
</script>

<style>
.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}
</style>

Any ideas? Thanks

Answer 1

found it! You have to put the class in the accordion body. So first define a class, for example

.restrict-collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

Then call it within the same brackets as the Accordion-body