H
H
HitGirl2021-06-26 21:51:33
css
HitGirl, 2021-06-26 21:51:33

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 question

Ask a Question

731 491 924 answers to any question