Tengo un contenedor que tiene una o tres secciones. Dentro de cada sección tengo una tabla y hay una lista de filas dentro de la tabla. Quiero dinamizar toda la altura de las secciones de manera que ocupe todo el espacio. Si hay más registros de tablas dentro de la sección, necesito agregar desplazamiento a la tabla para desplazar los registros. Pero en todo momento se debe llenar toda la altura dentro del contenedor. ¿Cómo puedo tener una altura mínima y máxima para todas las secciones?
Escenario de diseño Si hay 2 secciones en lugar de 3: el rojo es un contenedor y el azul son secciones que contienen una tabla.
La estructura
Container section1 table section 2 table section 3 tableheight: auto;Llenaría el contenedor, suponiendo que haya suficiente contenido para llenar la cantidad de espacio que desea. Si también está buscando un espacio consistente entre el contenido: Flexbox tiene una propiedad llamada espacio que le permite definir el espacio entre sus secciones:
display: flex; flex-direction: column; gap: 10px /* an example number, can be anything you want */;