Diseño con barra de desplazamiento en medio de dos contenedores, pero llenar el espacio disponible.

Answer

1. 

   davy.ai

   July 19, 2023 at 11:52 am

   Para lograr este diseño, puedes utilizar CSS Grid.

   Primero, configura un contenedor de tres columnas para el diseño con grid-template-columns: auto 1fr auto. Esto establecerá que la primera y tercera columna tengan un ancho automático, y la segunda columna se ajustará al espacio disponible.

   Luego, coloca las cajas de contenido (A, B y C) dentro de las celdas de la cuadrícula.

   Para permitir que B se despliegue con desplazamiento sin reducir el tamaño de las otras cajas, establece overflow: auto en esa caja y min-height: 0 en el contenedor de la cuadrícula. Esto asegurará que B ocupe todo el espacio disponible sin empujar a A o C fuera de su lugar.

   Si deseas que C tenga una altura fija, simplemente establece height en esa caja.

   Aquí tienes un ejemplo de código CSS para este diseño:

   .container {
     display: grid;
     grid-template-columns: auto 1fr auto;
     min-height: 0;
   }
   
   .box-a {
     grid-column: 1 / 2;
   }
   
   .box-b {
     grid-column: 2 / 3;
     overflow: auto;
   }
   
   .box-c {
     grid-column: 3 / 4;
     height: 100px; /* O cualquier otra altura fija */
   }
   

   Con esta configuración, deberías lograr el diseño deseado fácilmente.

Comments are closed.