fix(docs): Automatic scrolling fails on screens smaller than 721px due to flexbox behavior (angular#31037)

yousafravian · web-flow · commit 8cf76155d73b · 2025-05-06T10:56:18.000+02:00
Fixes a flexbox issue where if a flex item has `flex-basis: auto` and `min-height: auto`, it exceeds the height of its flex parent. Consequently, when `scrollBy` is called by `scrollDetector` in `drop-list-ref.ts`, the container is not scrollable because its height is determined by its content. Removing `min-height: auto` forces the flex item to match the height of its flex parent, allowing `scrollBy` to function correctly. Fixes angular#26476
diff --git a/docs/src/app/pages/component-sidenav/component-sidenav.scss b/docs/src/app/pages/component-sidenav/component-sidenav.scss
@@ -117,7 +117,7 @@ div.docs-component-viewer-nav-content .mat-nav-list .mat-mdc-list-item .mat-list
 
 @media (max-width: 720px) {
   .docs-component-viewer-sidenav-container {
-    flex: 1 0 auto;
+    flex: 1 0;
   }
 
   .docs-component-sidenav-body-content {

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ div.docs-component-viewer-nav-content .mat-nav-list .mat-mdc-list-item .mat-list`
`117`	`117`
`118`	`118`	`@media (max-width: 720px) {`
`119`	`119`	`.docs-component-viewer-sidenav-container {`
`120`		`- flex: 1 0 auto;`
	`120`	`+ flex: 1 0;`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`.docs-component-sidenav-body-content {`