[Vuejs]-TailwindCSS – How to make element's dropdown not push the other elements out of the boundary in the sidebar?

by

1👍

✅

You can make the container flex and make blue items unshrinkable.

  • Relevant added classes for container: flex flex-col.
  • For blue items: shrink-0.
<div id="container" class="h-96 w-52 overflow-hidden bg-black flex flex-col">
  <div class="h-[100px] w-full border border-black bg-blue-500 shrink-0"></div>
  <div id="item-container" class="space-y-1 overflow-y-scroll">
    <div class="h-10 w-full bg-red-500"></div>
    <div class="h-10 w-full bg-red-500"></div>
    <div class="h-10 w-full bg-red-500"></div>
    <div class="h-10 w-full bg-red-500"></div>
    <div class="h-10 w-full bg-red-500"></div>
    <div class="h-10 w-full bg-red-500"></div>
  </div>
  <div class="h-20 w-full border border-black bg-blue-500 shrink-0"></div>
  <div class="h-20 w-full border border-black bg-blue-500 shrink-0"></div>
</div>
👤L. Letovanec

Leave a comment