Desplazamiento de div infantil dentro de un div principal

Algunos antecedentes

Estoy usando widgets Gridster para la página web. Estos widgets se muestran debajo de una tabla HTML. La tabla ayuda a identificar cierta información para cada widget. Los widgets son elementos html

  • ubicados en
      .

      Los widgets se generan dinámicamente desde un json. (Por lo tanto, no están fijos en número)

      Mi resultado deseado

      Como los widgets se generan dinámicamente, puede haber demasiados widgets. Cuando esto sucede, la página web se vuelve demasiado grande y el usuario no puede ver la tabla HTML.

      Entonces, lo que quiero es que la parte en la que están los widgets se mueva, la tabla HTML se arregle en su posición

      Debido a lo cual, incluso cuando el usuario quiere ver los widgets que están en el fondo, puede ver la tabla HTML con él

      Lo que he intentado hasta ahora

      Hice una

      a la parte en la que hay widgets y le di al overflow:scroll la propiedad overflow:scroll hacia ellos. Pero incluso entonces no funciona de la manera en que estoy esperando

      Mi HTML

       

      My Webpage

      Zone for Gasoline:A, Year :2018

      Zone 1 Zone 2 >Zone 3
      T1 T2 T3 T4 T1 T2 T3 T4 T1 T2 T3 T4

      Lo siento por un código HTML tan grande. En HTML, puede ver que a continuación

      le he dado un father clase al elemento

      y child to

        .

        Para ambos probé el siguiente CSS (individualmente y de manera combinada)

         .father{ overflow:scroll; } .child{ overflow:scroll; } 

        Pero no estaba dando el efecto de “desplazamiento” que quería

        Violín que representa el mismo

        Cualquier ayuda será muy apreciada

        Suponiendo que desea aplicar el desplazamiento para habilitar el comportamiento receptivo en pantallas más pequeñas, como el teléfono móvil, el desplazamiento de desbordamiento se debe aplicar a uno de los padres de la tabla para habilitar el desplazamiento como tal

        HTML:

         
          ...

        CSS:

         .parent { overflow: scroll; } 

        Para una mejor experiencia de respuesta, probablemente solo queremos que este desplazamiento se realice de izquierda a derecha (eje y) y no de arriba hacia abajo (eje x), debemos configurar esto también y, por lo tanto, debemos ajustar nuestro CSS en consecuencia.

         .parent { overflow-y: scroll; } 

        En su ejemplo, parece que las clases padre e hijo se están aplicando a la construcción de la cuadrícula como una lista desordenada (

          ) con los icons del coche pequeño. Esta

            define la altura y con la del elemento principal, por lo por lo tanto, en una ventana lo suficientemente grande, no se esperaría que la tabla se desplace. Si comprime la ventana, sin embargo, el elemento principal solo se expande al ancho de la ventana, que es el comportamiento esperado de un div. En este punto, el elemento secundario se desplaza.

            Si desea aplicar este mismo comportamiento al elemento .table-responsive , debe aplicar el mismo principio. Envuelva la tabla en un padre y aplique el desbordamiento en consecuencia. No desea colocar overflow-scroll en la tabla misma, pero puede darle a la tabla un ancho mínimo o aplicar un ancho fijo como width: 300px;

            HTML:

             
          ...

          CSS:

           .parent { overflow-y: scroll; } .table-responsive { your styles } 

          Si necesita corregir las dimensiones del elemento principal para que el elemento no defina el tamaño de la ventana, podría hacer algo así con su CSS

           .parent { overflow: scroll; width: 400px; max-width: 100vw; height: 400px; max-height: 100vh; } .table-responsive { your styles } 

          En este caso, su ancho idealmente será de 400 píxeles de ancho, pero nunca excederá el ancho de la ventana gráfica y nunca tendrá más de 400 píxeles de alto, pero nunca excederá la altura de la ventana gráfica. Si quieres ser aún más inteligente con tu altura, puedes usar calc para tu altura máxima, por lo que esa ventana nunca excede una altura específica teniendo en cuenta otros elementos en la página.

      • Las tablas receptivas no están escritas así. Es como esto :

         
        ...