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

```html
<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!