Answer the question
In order to leave comments, you need to log in
Why does the panel not have a scrollbar when opening an accordion?
Hello!
Can you please tell me how to make a scrollbar appear on the general panel (first div) when the accordion is expanded, now the accordion content is not fully expanded, but there is no scrollbar?
<div class="overflow-y-auto block overflow-x-hidden bg-white h-mobileMain md:h-main w-full py-4 px-1 pr-2 flex flex-col items-center">
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
<div class="flex justify-between items-center w-full max-w-2xl mt-3 pb-3">
<p class="flex-grow">
Название</p>
<svg
class="hover:text-blue-500 text-dark-gray w-5 h-5 sm:w-7 sm:h-7 sm:mr-1" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div
class="border-b max-w-2xl flex justify-between items-stretch overflow-hidden transition-all duration-1000 ease-in-out"
:class="{'max-h-full':isActive,'max-h-0':!isActive }">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda dicta error molestiae quia. A
atque enim et harum rerum! A facere facilis harum illo magni modi nemo nobis veniam.
</div>
</div>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question