I need help debugging a CSS scrollbar issue on my website's FAQ modal. Here's the problem:

**Issue**: FAQ modal at https://agenticgovernance.digital/faq.html shows only ~8 questions visible, but 28+ questions exist in the DOM. No visible/functional scrollbar to access remaining content.

**Current Structure**:
```html
<div class="fixed inset-0 z-50"> <!-- backdrop -->
  <div class="bg-white max-w-4xl w-full h-[85vh] flex flex-col">
    <div class="flex-shrink-0">Header (fixed)</div>
    <div class="flex-1 modal-scrollable min-h-0">
      <div class="p-6">
        <!-- Search inputs -->
        <!-- 28+ FAQ items here -->
      </div>
    </div>
  </div>
</div>
```

**CSS Applied**:
```css
.modal-scrollable {
  overflow-y: scroll !important;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6;
}
.modal-scrollable::-webkit-scrollbar { width: 10px; background: #f3f4f6; }
.modal-scrollable::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 5px; }
```

**What I've tried** (all failed):
- Changed max-h to h on parent
- Added overflow-hidden to parent
- Added min-h-0 to flex child
- Explicit webkit scrollbar styling
- Various combinations of Tailwind + custom classes

**Tech**: Tailwind CSS 3.x, Vanilla JS, Flexbox layout

**Question**: What's preventing the scrollbar from working? Is the scrollable div wrapping both the search inputs AND results the problem? Should only the FAQ container be scrollable? What's the correct flexbox + overflow pattern here?

Please provide working HTML/CSS structure and explain why my current approach fails.