Can't apply overflow in a flexbox [duplicate]

Question

I'm struggling to make overflow-y works within flex.

<div class="flex h-full flex-col">
  <mark class="bg-red-900 p-2 font-semibold text-white"> Warning message </mark>
  <main class="flex flex-1 bg-green-100">
    <div class="flex flex-[4] bg-slate-100">
      <div class="flex flex-col bg-slate-200">
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
      </div>
      <div class="flex flex-1 flex-col bg-slate-400">
        <div class="flex flex-row-reverse border-y p-2">
          <h2 class="flex items-center font-black">F0KLM</h2>
          <div class="flex flex-1 flex-col">
            <span class="text-sm">User</span>
            <span class="text-sm">11:30</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex min-h-0 flex-[7] flex-col bg-red-100">
      <div class="flex items-center justify-between p-4">
        <div class="flex gap-4">
          <h1 class="font-black">F0KLM</h1>
          <BadgeStatus status={"new"} />
        </div>
        <div class="rounded-md bg-black p-2 text-white">11:24</div>
      </div>
      <div class="mx-4 flex flex-1 flex-col gap-2 overflow-y-auto bg-white">
        <div class="rounded-md border p-2">Header</div>
        <div class="rounded-md border p-2">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At erat pellentesque adipiscing commodo elit at imperdiet. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Arcu felis bibendum ut tristique et egestas quis ipsum.</p>
          Pharetra
          <p>sit amet aliquam id diam. Tellus mauris a diam maecenas sed enim ut. Sed faucibus turpis in eu. Neque ornare aenean euismod elementum nisi quis eleifend. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Eget magna fermentum iaculis eu. Elementum eu facilisis sed odio. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Nunc lobortis mattis aliquam faucibus. Leo integer malesuada nunc vel risus commodo.</p>
        </div>
        <div class="rounded-md border p-2">Info</div>
      </div>
      <div class="flex justify-end gap-4 p-4">
        <button variant="ghost">Ok</button>
        <button variant="ghost">Reject</button>
      </div>
    </div>
  </main>
  <nav class="flex justify-around bg-white py-2">
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
  </nav>
</div>

https://play.tailwindcss.com/FPDpxYXCTV

What I'd like to achieve is to have a scroll when the white div is overflowing, so the rest stay in place (full screen interface for iPad).

I've been trying to apply min-h-0 (min-height: 0;) on the parent div as suggested in numerous post, but it doesn't work..

Any help would be greatly appreciated!

Answer 1

One should add min-h-0 to <main>.. I swear I tried everything.

Answer 2

Add overflow-y-scroll h-3/5 to the div containing the paragraphs.

Please find below the solution code and watch result in full screen.

<script src="https://cdn.tailwindcss.com" ></script>
<div class="flex h-full flex-col">
  <mark class="bg-red-900 p-2 font-semibold text-white"> Warning message </mark>
  <main class="flex flex-1 bg-green-100">
    <div class="flex flex-[4] bg-slate-100">
      <div class="flex flex-col bg-slate-200">
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
        <button variant="ghost">Filter</button>
      </div>
      <div class="flex flex-1 flex-col bg-slate-400">
        <div class="flex flex-row-reverse border-y p-2">
          <h2 class="flex items-center font-black">F0KLM</h2>
          <div class="flex flex-1 flex-col">
            <span class="text-sm">User</span>
            <span class="text-sm">11:30</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex min-h-0 flex-[7] flex-col bg-red-100">
      <div class="flex items-center justify-between p-4">
        <div class="flex gap-4">
          <h1 class="font-black">F0KLM</h1>
          <BadgeStatus status={"new"} />
        </div>
        <div class="rounded-md bg-black p-2 text-white">11:24</div>
      </div>
      <div class="mx-4 flex flex-1 flex-col gap-2 overflow-y-auto bg-white">
        <div class="rounded-md border p-2">Header</div>
        <div class="rounded-md border p-2 overflow-y-scroll h-3/5">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
             labore et dolore magna aliqua. At erat pellentesque adipiscing commodo elit at imperdiet.
             Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Feugiat in fermentum
             posuere urna nec tincidunt praesent semper feugiat. Arcu felis bibendum ut tristique et
             egestas quis ipsum.</p>
          Pharetra
          <p>sit amet aliquam id diam. Tellus mauris a diam maecenas sed enim ut. Sed faucibus turpis in
            eu. Neque ornare aenean euismod elementum nisi quis eleifend. In nulla posuere sollicitudin
             aliquam ultrices sagittis orci a. Non quam lacus suspendisse faucibus interdum posuere lorem
              ipsum dolor. Eget magna fermentum iaculis eu. Elementum eu facilisis sed odio. Turpis egestas
               sed tempus urna et pharetra pharetra massa massa. Nunc lobortis mattis aliquam faucibus. Leo
               integer malesuada nunc vel risus commodo.</p>
               <p>sit amet aliquam id diam. Tellus mauris a diam maecenas sed enim ut. Sed faucibus turpis in
            eu. Neque ornare aenean euismod elementum nisi quis eleifend. In nulla posuere sollicitudin
             aliquam ultrices sagittis orci a. Non quam lacus suspendisse faucibus interdum posuere lorem
              ipsum dolor. Eget magna fermentum iaculis eu. Elementum eu facilisis sed odio. Turpis egestas
               sed tempus urna et pharetra pharetra massa massa. Nunc lobortis mattis aliquam faucibus. Leo
               integer malesuada nunc vel risus commodo.</p>
               <p>sit amet aliquam id diam. Tellus mauris a diam maecenas sed enim ut. Sed faucibus turpis in
            eu. Neque ornare aenean euismod elementum nisi quis eleifend. In nulla posuere sollicitudin
             aliquam ultrices sagittis orci a. Non quam lacus suspendisse faucibus interdum posuere lorem
              ipsum dolor. Eget magna fermentum iaculis eu. Elementum eu facilisis sed odio. Turpis egestas
               sed tempus urna et pharetra pharetra massa massa. Nunc lobortis mattis aliquam faucibus. Leo
               integer malesuada nunc vel risus commodo.</p>
        </div>
        <div class="rounded-md border p-2">Info</div>
      </div>
      <div class="flex justify-end gap-4 p-4">
        <button variant="ghost">Ok</button>
        <button variant="ghost">Reject</button>
      </div>
    </div>
  </main>
  <nav class="flex justify-around bg-white py-2">
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
    <button variant="ghost">Button</button>
  </nav>
</div>