Как сделать полосу прокрутки на гибком макете? - PullRequest
Новая
       46

Как сделать полосу прокрутки на гибком макете?

0 голосов
/ 05 августа 2020

Я работаю над маленьким экраном, где у меня одна боковая панель с контактами, а правая - для сообщений. Я не хочу, чтобы страница прокручивалась, только маленькое белое поле в центре.

Я не могу указать весь код страницы, но здесь у вас есть html. Что касается CSS, я использую попутный ветер. Все довольно ясно и понятно: flex-1 -> flex: 1, flex-row: flex-direction: row, et c.

Итак, как я мог бы иметь одну боковую панель для каждого маленького окна, используя мой текущий код? Вы можете просмотреть страницу, чтобы увидеть код. Я действительно не хочу переделывать весь макет на основе flexbox.

Вот живой пример только с этой страницей: https://5f275425b4b5b76757f8d3cf--epic-nightingale-0ed05d.netlify.app/

Код: 

<body cz-shortcut-listen="true">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root">
      <div class="font-display">
         <div class="bg-bureaux h-screen w-screen flex flex-row justify-center">
            <div class="flex flex-col w-card h-full">
               <h1 class="text-3xl text-white font-bold text-center py-4">Coffee Machine</h1>
               <div class="bg-white flex-1 rounded-card flex flex-col overflow-y-auto">
                  <div class="scrollbar-container ps ps--active-y">
                     <div class="flex flex-row justify-around py-10 font-bold text-xl text-gray-600"><span class="hover:text-black cursor-pointer border-b-4 hover:border-aa-yellow border-transparent">News Feed</span><span class="text-black cursor-pointer border-b-4 border-aa-yellow">Messages</span></div>
                     <div class="px-6 flex flex-col flex-1">
                        <div class="flex flex-col flex-1">
                           <div class="flex-row flex justify-between items-center"><span class="text-xl text-black font-bold">Messages</span><img src="/static/media/write.fec49b2a.svg" class="h-8 cursor-pointer fill-current text-gray-600" alt="New Message Icon"></div>
                           <div class="flex flex-row flex-1">
                              <div class="w-1/3 h-full border-r-2 border-gray-300 pr-2">
                                 <div class="scrollbar-container ps">
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
                                       <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-12 w-12 rounded-full">
                                       <div class="flex flex-col justify-center ml-2 w-full truncate leading-none space-y-1">
                                          <p class="font-bold">Mark Dupuis</p>
                                          <p class="text-sm text-gray-600 whitespace-no-wrap truncate">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
                                       </div>
                                    </div>
                                    <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                       <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                    </div>
                                    <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                       <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                        <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                     </div>
                     <div class="ps__rail-y" style="top: 0px; right: 0px; height: 712px;">
                        <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 501px;"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
...