necesito ayuda con el siguiente tema, estoy armando una página con Laravel y Tailwind, lo que necesito es que en la pantalla, ambos laterales queden fijos en función del alto disponible de la pantalla y que la zona central si se pueda utilizar mediante un Scroll. Les muestro una imagen de lo que necesitaría hacer y luego les paso el código que estoy utilizando, y que no me funciona adecuadamente.
El código que estoy utilizando es el siguiente:
<body class="bg-gray-300">
<h1 class="bg-gray-900 text-blue-300 font-bold text-center text-4xl p-4" >SISTEMA NACIONAL DE ESTADÍSTICAS DE EJECUCIÓN DE LA PENA</h1>
<div class="grid grid-cols-12 gap-2 mt-3 px-2">
<div class="col-span-full">
<div class="mt-3 mb-3 text-center">
@livewire('aplicarfiltros')
</div>
</div>
<div class="border rounded-md border-cyan-500 col-span-2 p-2">
@livewire('filtros')
</div>
<div class="bg-blue-500 col-span-8">C2</div>
<div class="bg-blue-200 col-span-2">C3</div>
</div>
Mediante este código, estoy creando las tres zonas que necesito, dentro del componente filtros, están los desplegables que se ven en la gráfica
<div>
<div class="mb-3">
<label class="text-xs" for="anioCenso">Establecer el año</label>
<select wire:model="anioCenso" id="anioCenso" class="hover:bg-gray-400 w-full p-1 rounded-md">
<option value="0"></option>
@foreach ($tb_aniCenso as $it)
<option value="{{ $it->anio }}">{{ $it->anio }}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label class="text-xs" for="tipServicio">Tipo de Servicio Penitenciario</label>
<select wire:model="tipServicio" id="tipServicio" class="hover:bg-gray-400 w-full p-1 rounded-md">
<option value="0"></option>
@foreach ($tb_tipServicio as $it)
<option value="{{ $it->item }}">{{ $it->descrip }}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label class="text-xs" for="idProvincia">Provincia</label>
<select wire:model="idProvincia" id="idProvincia" class="hover:bg-gray-400 w-full p-1 rounded-md">
<option value="0"></option>
@foreach ($tb_idProvincia as $it)
<option value="{{ $it->item }}">{{ $it->descrip }}</option>
@endforeach
</select>
</div>
<div class="mb-6">
<label class="text-xs" for="idEstab">Establecimiento</label>
<select wire:model="idEstab" id="idEstab" class="hover:bg-gray-400 w-full p-1 rounded-md">
<option value="0"></option>
@if ($tb_idEstab)
@foreach ($tb_idEstab as $it)
<option value="{{ $it->nroID }}">{{ $it->Nombre }}</option>
@endforeach
@endif
</select>
</div>
les muestro solo tres desplegables, pero el resto está definido de la misma manera.
Gracias y quedo a la espera de algún comentario.