fix(overlay): maxWidth and maxHeight not applied when using ex… (#17586)

Usually the `maxWidth` and `maxHeight` are applied to the connected overlay's bounding box, because it's the one that determines the dimensions and the overlay pane stretches to fill them. In the case where exact dimensions are used, we make the bounding box the size of the viewport and we let the overlay grow on its own, however we weren't re-applying the `maxWidth` and `maxHeight`.

Fixes #17582.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -2019,6 +2019,65 @@ describe('FlexibleConnectedPositionStrategy', () => {
         document.body.removeChild(veryLargeElement);
       });
 
+    it('should set the maxWidth and maxHeight on the bounding box when exact dimension are ' +
+      'not used', () => {
+        originElement.style.top = '50px';
+        originElement.style.left = '50%';
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPositions([{
+            overlayX: 'start',
+            overlayY: 'top',
+            originX: 'start',
+            originY: 'bottom'
+          }]);
+
+        attachOverlay({
+          positionStrategy,
+          maxWidth: 250,
+          maxHeight: 300
+        });
+
+        const overlayStyle = overlayRef.overlayElement.style;
+        const boundingBoxStyle = overlayRef.hostElement.style;
+
+        expect(overlayStyle.maxWidth).toBeFalsy();
+        expect(overlayStyle.maxHeight).toBeFalsy();
+        expect(boundingBoxStyle.maxWidth).toBe('250px');
+        expect(boundingBoxStyle.maxHeight).toBe('300px');
+      });
+
+    it('should set the maxWidth and maxHeight on the overlay pane when exact dimensions are used',
+      () => {
+        originElement.style.bottom = '0';
+        originElement.style.left = '50%';
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPositions([{
+            overlayX: 'start',
+            overlayY: 'top',
+            originX: 'start',
+            originY: 'bottom'
+          }]);
+
+        attachOverlay({
+          positionStrategy,
+          maxWidth: 250,
+          maxHeight: 300
+        });
+
+        const overlayStyle = overlayRef.overlayElement.style;
+        const boundingBoxStyle = overlayRef.hostElement.style;
+
+        expect(overlayStyle.maxWidth).toBe('250px');
+        expect(overlayStyle.maxHeight).toBe('300px');
+        expect(boundingBoxStyle.maxWidth).toBeFalsy();
+        expect(boundingBoxStyle.maxHeight).toBeFalsy();
+      });
 
   });
 

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -791,7 +791,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
     if (this._hasExactPosition()) {
       styles.top = styles.left = '0';
-      styles.bottom = styles.right = '';
+      styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';
       styles.width = styles.height = '100%';
     } else {
       const maxHeight = this._overlayRef.getConfig().maxHeight;
@@ -860,8 +860,11 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   /** Sets positioning styles to the overlay element. */
   private _setOverlayElementStyles(originPoint: Point, position: ConnectedPosition): void {
     const styles = {} as CSSStyleDeclaration;
+    const hasExactPosition = this._hasExactPosition();
+    const hasFlexibleDimensions = this._hasFlexibleDimensions;
+    const config = this._overlayRef.getConfig();
 
-    if (this._hasExactPosition()) {
+    if (hasExactPosition) {
       const scrollPosition = this._viewportRuler.getViewportScrollPosition();
       extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));
       extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));
@@ -891,12 +894,22 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because
     // we need these values to both be set to "100%" for the automatic flexible sizing to work.
     // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.
-    if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxHeight) {
-      styles.maxHeight = '';
+    // Note that this doesn't apply when we have an exact position, in which case we do want to
+    // apply them because they'll be cleared from the bounding box.
+    if (config.maxHeight) {
+      if (hasExactPosition) {
+        styles.maxHeight = coerceCssPixelValue(config.maxHeight);
+      } else if (hasFlexibleDimensions) {
+        styles.maxHeight = '';
+      }
     }
 
-    if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxWidth) {
-      styles.maxWidth = '';
+    if (config.maxWidth) {
+      if (hasExactPosition) {
+        styles.maxWidth = coerceCssPixelValue(config.maxWidth);
+      } else if (hasFlexibleDimensions) {
+        styles.maxWidth = '';
+      }
     }
 
     extendStyles(this._pane.style, styles);