Переполнение и прокрутка нет полосы прокрутки в меню

Question

У меня есть меню со списком элементов, которые я хочу прокручивать, когда высота окна становится слишком маленькой. Меню также имеет фиксированное основание с несколькими другими пунктами меню, которые я хочу оставить в нижней части экрана и оставаться над другими пунктами меню, когда окно становится слишком маленьким.

Я добавил переполнениеy прокрутите на контейнер пунктов меню, но я не получаю никакой полосы прокрутки.

Вот кодовое перо, которое показывает меню в действии. https://codepen.io/jachno/pen/QWWLzvj

Когда вы смотрите на кодовую ручку, я хочу прокрутить пункты с 1 по 11.

<div  class="w-64">
    <div class="overflow-y-scroll h-full ">
        <div class="flex-grow" id="sub-menu" >
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active  "
                                     :to="'/home' ">1
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                    <div style="height: 60%;"></div>
                 </div>
                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/tasks'">2
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                     <div style="height: 60%;"></div>
                 </div>

                 <router-link exact-active-class="side-menu-item-active" class="side-menu-item active   "
                                     :to="'/home/venues'">3
                 </router-link>
                 <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                    <div class="" style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :class="{'side-menu-item-active': isActive == 'createCompany' }"
                                     :to="'/home/companies'">4
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                     <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/invitations'">5
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                      <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     v-if="Spark.admin == 1" :to="'/home/bdm'">6
                  </router-link>
                  <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                      <div style="height: 60%;"></div>
                  </div>
                  <router-link exact-active-class="side-menu-item-active" class="side-menu-item active"
                                     :to="'/home/settings'">7
                  </router-link>
                </div>
           </div>
           <div class="my-2">
              <div class="border-t border-grey-light" style="width: 90%"></div>

              <div class="flex-grow   relative"  id="sub-menu">
        <div class=" bg-white mr-0  flex  flex-col ">
            <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/home/'">8</router-link>
            <div   class="side-menu-item active" >9</div>
            <a   class="side-menu-item active"    href="/telescope">10</a>
            <a  class="side-menu-item active"    href="/richie">11</a>
        </div>
    </div>

  </div>

  <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
    <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">

        <div class="tw-flex tw-p-2">

            <div class="ml-1 flex-grow">
            </div>
            <div class=" flex justify-center items-center ">
                <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
                <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>

            </div>
        </div>
        <div v-if="menu">
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/home/settings'">Settings</router-link>
            </div>
            <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                <router-link exact-active-class="side-menu-item-active"  class="side-menu-item active"     :to="'/logout'">Logout</router-link>
            </div>
          </div>
        </div>            
      </div>
    </div>
  </div>
</div>

Answer 1

Вы можете использовать этот код

body {
            margin: 0;
            padding: 0;
        }
        .w-64 {
            padding: 15px;
        }
        div.ex1 {
            background-color: lightblue;
            height: 100px;
            width: 300px;
            overflow-y: scroll;
        }
        .my-2 {
            margin: 0px!important;
        }

<div class="w-64">
        <div class="overflow-y-scroll h-full">
            <div class="ex1">
                <div class="flex-grow" id="sub-menu">
                    <div class="tw-bg-white tw-mr-0  tw-flex  tw-flex-col">
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home'">1
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/tasks'">2
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/venues'">3
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div class="" style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :class="{'side-menu-item-active': isActive == 'createCompany' }" :to="'/home/companies'">4
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/invitations'">5
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" v-if="Spark.admin == 1" :to="'/home/bdm'">6
                        </router-link>
                        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
                            <div style="height: 60%;"></div>
                        </div>
                        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">7
                        </router-link>
                    </div>
                </div>
                <div class="my-2">
                    <div class="border-t border-grey-light" style="width: 90%"></div>
                    <div class="flex-grow relative" id="sub-menu">
                        <div class="mr-0  flex  flex-col">
                            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/'">8</router-link>
                            <div class="side-menu-item active">9</div>
                            <a class="side-menu-item active" href="/telescope">10</a>
                            <a class="side-menu-item active" href="/richie">11</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
                <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">
                    <div class="tw-flex tw-p-2">
                        <div class="ml-1 flex-grow">
                        </div>
                        <div class=" flex justify-center items-center ">
                            <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
                            <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div v-if="menu">
                        <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">Settings</router-link>
                        </div>
                        <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
                            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/logout'">Logout</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 2

Задайте максимальную высоту для div, который вы хотите прокрутить, а также для переполнения: auto

Answer 3

Проблема может быть решена с помощью небольшой реструктуризации.

Тот факт, что вы встраиваете все 3 блока, то есть 2 блока с опциями списка, и другой блок с настройками и выходом из системы, может быть реализован лучшеway:

    // here is one css change
    <html lang="en" style="
        height: 100%;
    "><head>
    </head>
    // here is one css change
    <body translate="no" style="
        height: 100%;
    ">
    // here is one css change
    <div class="w-64" style="
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    ">
    // here is one css change
    <div class="overflow-y-scroll h-full " style="
        flex: 1 1 200px;
        min-height: 200px;
    ">
    <div class="flex-grow" id="sub-menu">
    <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active  " :to="'/home' ">1
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/tasks'">2
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active   " :to="'/home/venues'">3
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div class="" style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :class="{'side-menu-item-active': isActive == 'createCompany' }" :to="'/home/companies'">4
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/invitations'">5
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" v-if="Spark.admin == 1" :to="'/home/bdm'">6
    </router-link>
    <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
    <div style="height: 60%;"></div>
    </div>
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">7
    </router-link>
    </div>
    </div>
    <div class="my-2">
    <div class="border-t border-grey-light" style="width: 90%"></div>
    <div class="flex-grow   relative" id="sub-menu">
    <div class=" bg-white mr-0  flex  flex-col ">
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/'">8</router-link>
    <div class="side-menu-item active">9</div>
    <a class="side-menu-item active" href="/telescope">10</a>
    <a class="side-menu-item active" href="/richie">11</a>
    </div>
    </div>
    </div>

    </div>
    <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
    <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">
    <div class="tw-flex tw-p-2">
    <div class="ml-1 flex-grow">
    </div>
    <div class=" flex justify-center items-center ">
    <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
    <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>
    </div>
    </div>
    <div v-if="menu">
    <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">Settings</router-link>
    </div>
    <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
    <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/logout'">Logout</router-link>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

Таким образом, ваш контейнер div элементов списка будет адаптироваться к размеру экрана и отображать полосу прокрутки только при необходимости.

Надеюсь, это поможет !!!!

Answer 4

Придерживаясь базовых переполнений, вашему div нужно установить высоту, после которой может появиться свиток. Итак, если вы установите высоту, равную 100% - the height of the absolute element, ваш div будет показывать полосу прокрутки

.set-scroll {
  max-height: calc(100vh - 100px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css" rel="stylesheet" />
<div class="w-64">


  <div class="overflow-y-scroll set-scroll">

    <div class="flex-grow" id="sub-menu">
      <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active  " :to="'/home' ">1
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/tasks'">2
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>

        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active   " :to="'/home/venues'">3
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div class="" style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :class="{'side-menu-item-active': isActive == 'createCompany' }" :to="'/home/companies'">4
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/invitations'">5
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" v-if="Spark.admin == 1" :to="'/home/bdm'">6
        </router-link>
        <div class="tw-justify-center tw-flex tw-flex-col sm:tw-hidden tw-inline-flex">
          <div style="height: 60%;"></div>
        </div>
        <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">7
        </router-link>
      </div>

    </div>
    <div class="my-2">
      <div class="border-t border-grey-light" style="width: 90%"></div>

      <div class="flex-grow   relative" id="sub-menu">
        <div class=" bg-white mr-0  flex  flex-col ">
          <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/'">8</router-link>
          <div class="side-menu-item active">9</div>
          <a class="side-menu-item active" href="/telescope">10</a>
          <a class="side-menu-item active" href="/richie">11</a>


        </div>



      </div>




    </div>

    <div class="bottom-0 z-100 absolute pb-8 bg-white  w-full">
      <div class=" tw-border-t tw-border-grey-light hover:tw-bg-grey-lightest" @click="menu = !menu">

        <div class="tw-flex tw-p-2">

          <div class="ml-1 flex-grow">
          </div>
          <div class=" flex justify-center items-center ">
            <i class="tw-mr-1 fa fa-chevron-down tw-text-grey-darker tw-ml-1" v-if="!menu" aria-hidden="true"></i>
            <i class="tw-mr-1 fa fa-chevron-up tw-text-grey-darker tw-ml-1" v-if="menu" aria-hidden="true"></i>

          </div>
        </div>
        <div v-if="menu">
          <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/home/settings'">Settings</router-link>
          </div>
          <div class=" tw-bg-white tw-mr-0  tw-flex  tw-flex-col ">
            <router-link exact-active-class="side-menu-item-active" class="side-menu-item active" :to="'/logout'">Logout</router-link>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>