[WC-3241] Scroll container, restore scrolling by having all element flex (#293)

Author: r0b1n

packages/atlas-core/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with scroll container regions not scrolling correctly in some cases.
+
 ## [4.3.2] Atlas Core - 2026-1-20
 
 ### Fixed

packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss

@@ -43,68 +43,65 @@
     }
 
     .mx-scrollcontainer {
-        flex-shrink: 0;
-        flex-grow: 1;
-        flex-basis: 0;
-
-        &:not(.mx-scrollcontainer-fixed) {
-            // Make scroll container use full width and grow outside of it's parent
-            // this makes it fully scrollable without individual regions having scroll containers
-            min-height: auto;
-        }
-
-        &.mx-scrollcontainer-fixed {
-            // Make scroll container scrollable per region
-            // For this we fix height to stay withing the size of the parent,
-            // so that regions of the scroll container can't stretch the scroll container
-            // even if they are higher than the screen
-            max-height: 100%;
-            min-height: 100%;
-        }
+        flex: 1 0 0;
+        display: flex;
     }
 
     .mx-scrollcontainer-horizontal {
-        display: flex;
         flex-direction: row;
     }
 
     .mx-scrollcontainer-vertical {
-        display: flex;
         flex-direction: column;
     }
 
     .mx-scrollcontainer-fixed {
-        // for scroll per region, regions should overflow if they have long content
+        // this class is added when scroll container has to scroll per region (fixed toolbar)
+        // to make this happen scroll container regions have to be able to shrink smaller than their children
+        // for this we set min-height: 0;
+        // this allows regions to have overflow instead of always growing for their children
+        min-height: 0;
+
         .mx-scrollcontainer-left,
         .mx-scrollcontainer-right,
         .mx-scrollcontainer-center,
-        d .mx-scrollcontainer-middle {
+        .mx-scrollcontainer-middle {
+            min-height: 0;
+            // make those regions overflow, those are scrolling point
             overflow: auto;
         }
+
+        .mx-scrollcontainer-nested {
+            min-height: 0;
+        }
     }
 
     // left and right regions should maintain fixed size, no shrinking or expanding
     .mx-scrollcontainer-left,
     .mx-scrollcontainer-right,
     .mx-scrollcontainer-top,
     .mx-scrollcontainer-bottom {
-        flex-grow: 0;
-        flex-shrink: 0;
+        flex: 0 0 auto;
     }
-    // center region should fill available space
+
+    // center regions should fill available space
     .mx-scrollcontainer-middle,
     .mx-scrollcontainer-center {
-        flex-grow: 1;
+        flex: 1 1 auto;
+
+        // wrappers inside those elements are also positioned with flex
         display: flex;
         flex-direction: column;
     }
 
-    // if there is a nested scroll container we always want
-    // outer scroll container to stay withing available height
-    // and don't allow inner scroll container to grow
+    // wrappers inside regions should fill available space
+    .mx-scrollcontainer-wrapper {
+        flex: 1 1 auto;
+    }
+
     .mx-scrollcontainer-nested {
-        height: 100%;
         padding: 0;
+        display: flex;
     }
 
     // SIDEBAR TOGGLE STYLES
@@ -122,7 +119,8 @@
     // Animate transitions for toggleable sidebars
     .mx-scrollcontainer-left.mx-scrollcontainer-toggleable,
     .mx-scrollcontainer-right.mx-scrollcontainer-toggleable {
-        transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function), margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function),
+        transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function),
+            margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function),
             margin-left var(--navsidebar-animation-duration) var(--navsidebar-animation-function);
         z-index: 1;
     }
@@ -218,29 +216,28 @@
         }
     }
 
-
-    // make the first child of the MAIN part of the scroll container to grow full height
+    // make the first child of the MAIN part of the scroll container to grow full height and allow it to shrink
+    // this is a custom case when a data view is the only child of the scroll region, it's footer must stick to the top
+    // in order to achieve this we have to make the element and the wrapper shrinkable
     .region-content {
-        display: flex;
-        flex-direction: column;
-
-        & > .mx-scrollcontainer-wrapper{
-            height: 100%;
-            flex: 1;
+        & > .mx-scrollcontainer-wrapper {
+            flex: 1 1 auto;
+            min-height: 0;
             display: flex;
             flex-direction: column;
 
-            & > .mx-placeholder{
-                height: 100%;
-                flex-grow: 1;
+            & > .mx-placeholder {
+                flex: 1 1 auto;
+                min-height: 0;
                 display: flex;
                 flex-direction: column;
 
-                & > *:only-child{
-                    height: 100%;
-                    flex-grow: 1;
+                // this implies that this only child here is top level data view
+                & > *:only-child {
+                    flex: 1 1 auto;
+                    min-height: 0;
                 }
             }
         }
     }
-}
+}