search

Home  >  Q&A  >  body text

TailwindCSS - How to make an element's dropdown menu not push other elements out of bounds in the sidebar?

<p>I basically have a sidebar that can contain multiple sections (blue), each of which can be turned on/off, and can contain multiple items (red). When opened, I want the expanded element not to push the other blue parts out of the border, but to push them outside the border and do overflow y scrolling on the expanded part. Here's a screenshot of what it looks like (1) and what it should look like (2): </p> <p>Here is the code used: </p> <p> <pre class="brush:html;toolbar:false;"><div id="container" class="h-96 w-52 overflow-hidden bg-black"> <div class="h-[100px] w-full border border-black bg-blue-500"></div> <div id="item-container" class="h-fit 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"></div> <div class="h-20 w-full border border-black bg-blue-500"></div> </div> <style> .h-96{ height: 24rem; } .w-52{ width: 13rem; } .overflow-hidden{ overflow: hidden; } .bg-black{ background-color: rgb(0 0 0); } .w-full{ width:100%; } .border{ border-width: 1px; } .border-black{ border-color: rgb(0 0 0); } .bg-blue-500{ background-color: rgb(59 130 246); } .h-fit{ height: fit-content; } .space-y-1{ margin-top: 0.25rem; } .overflow-y-scroll{overflow-y: scroll;} .h-10{height: 2.5rem;} .bg-red-500{background-color: rgb(239 68 68);} .h-20{height: 5rem;} .h-\[100px\]{ height:100px; } </style></pre> </p> <p>Thanks in advance for any help you can provide! </p>
P粉505450505P粉505450505478 days ago619

reply all(1)I'll reply

  • P粉037215587

    P粉0372155872023-09-04 00:21:04

    You can make the container curved and keep the blue items from shrinking.

    • Added related classes for containers: 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>

    reply
    0
  • Cancelreply