restrict height of collapsed accordion segment Bootstrap 5 Vue3 - vue.js

Question

I am building a web app with Vue3 and bootstrap 5. But I think this issue only concerns bootstrap. What I want to do is to restrict the height of the collapsed accordion segment, so it does not kick the other segments too far down when its content is long.
What I tried is to add max-height and overflow: auto to the class .collapsing and I already added "collapsing" to the classes of the accordion but then the accordion scrolls to the height and after a second jumps to full unfolding. In the node_modules bootstrap folder, I looked into the _accordion.scss and changed "overflow-anchor" to auto and nothing changed.
.collapsing {
max-height: 100px !important;
overflow: auto !important;
}
On 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 gotta put the class in the accordion-body.
So at first define a class like
.restrict-collapsing {
max-height: 100px !important;
overflow: auto !important;
}
then call it within the same bracket as accordion-body
<div class="accordion-body restrict_collapsing">
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>