Unable to detect scroll in ion-router-outlet

Ionic Framework Ionic Angular
1

onic Version: Latest (Angular)
Framework: Angular (latest version)
CSS Framework: Tailwind CSS (latest version)
Platform:** Web/Mobile

I’m having trouble getting the scrollbar to appear in my ion-content even though I have plenty of content that should exceed the viewport height. I’ve followed the documentation and added the ion-padding class, but the scrollbar still doesn’t activate.

Current Code Structure
Main Layout (app.component.html or similar):

<ion-header [translucent]="true">
  <ion-toolbar>
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center space-x-3">
        <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background-color: var(--ion-color-primary);">
          <ion-icon name="home-outline" class="text-lg"></ion-icon>
        </div>
        <h1 class="font-bold text-xl tracking-wide">Mi App</h1>
      </div>

      <div class="flex items-center space-x-3">
        <ion-button fill="clear" size="small">
          <ion-icon name="notifications-outline" slot="icon-only"></ion-icon>
        </ion-button>
        <ion-button fill="clear" size="small">
          <ion-icon name="settings-outline" slot="icon-only"></ion-icon>
        </ion-button>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-router-outlet></ion-router-outlet>
</ion-content>

<ion-tab-bar>
  <ion-tab-button tab="home" href="/home">
    <ion-icon name="home-outline"></ion-icon>
    <ion-label>Inicio</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="security" href="/security">
    <ion-icon name="shield-outline"></ion-icon>
    <ion-label>Seguridad</ion-label>
  </ion-tab-button>
  
  <ion-tab-button disabled="true">
    <ion-icon name="search-outline"></ion-icon>
    <ion-label>Buscar</ion-label>
  </ion-tab-button>

  <ion-tab-button disabled="true">
    <ion-icon name="heart-outline"></ion-icon>
    <ion-label>Favoritos</ion-label>
  </ion-tab-button>
</ion-tab-bar>

Home Page Content (home.page.html):

<div class="min-h-screen space-y-6 pb-9">
  
  <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-6 text-white">
    <h2 class="text-2xl font-bold mb-2">¡Bienvenido de vuelta!</h2>
    <p class="text-blue-100 mb-4">Explora todas las funcionalidades de tu aplicación</p>
    <ion-button fill="outline" color="light" size="small">
      <ion-icon name="arrow-forward-outline" slot="end"></ion-icon>
      Comenzar
    </ion-button>
  </div>

  <div class="grid grid-cols-2 gap-4">
    <ion-card class="m-0">
      <ion-card-content class="text-center p-4">
        <ion-icon name="trophy-outline" class="text-3xl text-yellow-500 mb-2"></ion-icon>
        <h3 class="font-bold text-lg">125</h3>
        <p class="text-gray-600 text-sm">Logros</p>
      </ion-card-content>
    </ion-card>
    
    <ion-card class="m-0">
      <ion-card-content class="text-center p-4">
        <ion-icon name="people-outline" class="text-3xl text-blue-500 mb-2"></ion-icon>
        <h3 class="font-bold text-lg">1,234</h3>
        <p class="text-gray-600 text-sm">Usuarios</p>
      </ion-card-content>
    </ion-card>
  </div>

  <ion-card>
    <ion-card-header>
      <ion-card-title class="text-lg font-bold">Acciones Rápidas</ion-card-title>
    </ion-card-header>
    <ion-card-content class="p-0">
      <div class="space-y-2">
        <ion-item button>
          <ion-icon name="document-text-outline" slot="start" class="text-blue-500"></ion-icon>
          <ion-label>
            <h3 class="font-semibold">Crear Documento</h3>
            <p class="text-gray-600">Nuevo documento de trabajo</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        
        <ion-item button>
          <ion-icon name="camera-outline" slot="start" class="text-green-500"></ion-icon>
          <ion-label>
            <h3 class="font-semibold">Escanear QR</h3>
            <p class="text-gray-600">Escanea código QR</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
        
        <ion-item button>
          <ion-icon name="share-outline" slot="start" class="text-purple-500"></ion-icon>
          <ion-label>
            <h3 class="font-semibold">Compartir</h3>
            <p class="text-gray-600">Comparte con amigos</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
        </ion-item>
      </div>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <div class="flex justify-between items-center">
        <ion-card-title class="text-lg font-bold">Actividad Reciente</ion-card-title>
        <ion-button fill="clear" size="small">
          Ver todo
        </ion-button>
      </div>
    </ion-card-header>
    <ion-card-content class="p-0">
      <div class="space-y-3 p-4">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
            <ion-icon name="checkmark-outline" class="text-blue-600"></ion-icon>
          </div>
          <div class="flex-1">
            <p class="font-semibold text-sm">Tarea completada</p>
            <p class="text-gray-600 text-xs">Hace 2 horas</p>
          </div>
        </div>
        
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
            <ion-icon name="add-outline" class="text-green-600"></ion-icon>
          </div>
          <div class="flex-1">
            <p class="font-semibold text-sm">Nuevo proyecto creado</p>
            <p class="text-gray-600 text-xs">Hace 4 horas</p>
          </div>
        </div>
        
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
            <ion-icon name="mail-outline" class="text-orange-600"></ion-icon>
          </div>
          <div class="flex-1">
            <p class="font-semibold text-sm">Mensaje recibido</p>
            <p class="text-gray-600 text-xs">Hace 6 horas</p>
          </div>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title class="text-lg font-bold">Tu Progreso</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="space-y-4">
        <div>
          <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium">Perfil Completado</span>
            <span class="text-sm text-gray-600">75%</span>
          </div>
          <ion-progress-bar value="0.75" color="primary"></ion-progress-bar>
        </div>
        
        <div>
          <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium">Objetivos del Mes</span>
            <span class="text-sm text-gray-600">60%</span>
          </div>
          <ion-progress-bar value="0.6" color="success"></ion-progress-bar>
        </div>
        
        <div>
          <div class="flex justify-between items-center mb-2">
            <span class="text-sm font-medium">Tareas Pendientes</span>
            <span class="text-sm text-gray-600">40%</span>
          </div>
          <ion-progress-bar value="0.4" color="warning"></ion-progress-bar>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <ion-card class="m-0">
      <ion-card-content class="text-center p-4">
        <ion-icon name="analytics-outline" class="text-4xl text-indigo-500 mb-3"></ion-icon>
        <h3 class="font-bold text-lg mb-2">Análisis</h3>
        <p class="text-gray-600 text-sm mb-3">Revisa tus estadísticas y métricas detalladas</p>
        <ion-button fill="outline" size="small">
          Ver más
        </ion-button>
      </ion-card-content>
    </ion-card>
    
    <ion-card class="m-0">
      <ion-card-content class="text-center p-4">
        <ion-icon name="settings-outline" class="text-4xl text-gray-500 mb-3"></ion-icon>
        <h3 class="font-bold text-lg mb-2">Configuración</h3>
        <p class="text-gray-600 text-sm mb-3">Personaliza tu experiencia en la aplicación</p>
        <ion-button fill="outline" size="small">
          Configurar
        </ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <ion-card>
    <ion-card-header>
      <ion-card-title class="text-lg font-bold">Noticias y Actualizaciones</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="space-y-4">
        <div class="border-l-4 border-blue-500 pl-4">
          <h4 class="font-semibold text-base mb-1">Nueva función disponible</h4>
          <p class="text-gray-600 text-sm mb-2">Ahora puedes exportar tus datos en formato PDF. Esta nueva característica te permitirá generar reportes profesionales de manera sencilla.</p>
          <span class="text-xs text-blue-600 font-medium">Hace 1 día</span>
        </div>
        
        <div class="border-l-4 border-green-500 pl-4">
          <h4 class="font-semibold text-base mb-1">Mejoras de seguridad</h4>
          <p class="text-gray-600 text-sm mb-2">Hemos implementado autenticación de dos factores para mayor seguridad de tu cuenta. Te recomendamos activarla desde configuración.</p>
          <span class="text-xs text-green-600 font-medium">Hace 3 días</span>
        </div>
        
        <div class="border-l-4 border-orange-500 pl-4">
          <h4 class="font-semibold text-base mb-1">Mantenimiento programado</h4>
          <p class="text-gray-600 text-sm mb-2">El próximo domingo habrá mantenimiento del sistema de 2:00 AM a 4:00 AM. Durante este tiempo el servicio podría estar limitado.</p>
          <span class="text-xs text-orange-600 font-medium">Hace 5 días</span>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <ion-card class="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
    <ion-card-content class="text-center p-6">
      <ion-icon name="star-outline" class="text-4xl mb-3"></ion-icon>
      <h3 class="font-bold text-xl mb-2">¿Te gusta la app?</h3>
      <p class="mb-4 text-purple-100">Ayúdanos calificándola en la tienda de aplicaciones</p>
      <ion-button fill="outline" color="light">
        <ion-icon name="star" slot="start"></ion-icon>
        Calificar ahora
      </ion-button>
    </ion-card-content>
  </ion-card>

  <div class="text-center py-4 text-gray-500">
    <p class="text-sm">© 2024 Mi App. Todos los derechos reservados.</p>
    <p class="text-xs mt-1">Versión 1.2.3</p>
  </div>

</div>

Screenshots:

Screenshot 2025-05-22 155508
Screenshot 2025-05-22 1555081518×918 69.9 KB

What I’ve Tried

  1. Added ion-padding class to ion-content
  2. Used Tailwind classes like min-h-screen, h-screen, overflow-y-auto
  3. Wrapped content in divs with specific heights
  4. Added substantial content that clearly exceeds viewport height
  5. Tested on different devices and screen sizes

Expected Behavior

The ion-content should show a scrollbar when the content exceeds the available viewport height.

Actual Behavior

No scrollbar appears, and the content seems to be contained within the viewport without the ability to scroll to see all content.

Questions

  1. Is there something specific about using ion-router-outlet inside ion-content that prevents scrolling?
  2. Do I need additional CSS properties when using Tailwind CSS with Ionic?
  3. Are there any known conflicts between Ionic scrolling and Tailwind CSS classes?