@HitGirl

Почему у панели не появляется скролл-бар при открытии аккордиона?

Здравствуйте!
Подскажите, пожалуйста, как сделать чтобы при раскрытии аккордеона, появлялась полоса прокрутки на общей панели (первый div), сейчас контент аккордеона раскрывается не полностью, а полосы прокрутки нет?
<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>
  • Вопрос задан
  • 24 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы