Added the 'max-width' css attribute

Author: TheCarpetMerchant

lib/src/css_box_widget.dart

@@ -59,8 +59,24 @@ class CssBoxWidget extends StatelessWidget {
     final direction = _checkTextDirection(context, textDirection);
     final padding = style.padding?.resolve(direction);
 
+    Width? maxWidthCalculated;
+    if (style.maxWidth != null && style.width != null) {
+      if (style.maxWidth!.unit == Unit.percent &&
+          style.width!.unit == Unit.px) {
+        // If our max is a percentage, we want to look at the size available and not be bigger than that.
+        try {
+          double width =
+              MediaQuery.of(context).size.width * (style.maxWidth!.value / 100);
+          maxWidthCalculated = Width(width, style.width!.unit);
+        } catch (_) {}
+      } else if (style.width!.unit == style.maxWidth!.unit &&
+          style.width!.value > style.maxWidth!.value) {
+        maxWidthCalculated = Width(style.maxWidth!.value, style.maxWidth!.unit);
+      }
+    }
+
     return _CSSBoxRenderer(
-      width: style.width ?? Width.auto(),
+      width: maxWidthCalculated ?? style.width ?? Width.auto(),
       height: style.height ?? Height.auto(),
       paddingSize: padding?.collapsedSize ?? Size.zero,
       borderSize: style.border?.dimensions.collapsedSize ?? Size.zero,

lib/src/css_parser.dart

@@ -654,6 +654,10 @@ Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
           style.width =
               ExpressionMapping.expressionToWidth(value.first) ?? style.width;
           break;
+        case 'max-width':
+          style.maxWidth = ExpressionMapping.expressionToWidth(value.first) ??
+              style.maxWidth;
+          break;
       }
     }
   });
@@ -1228,6 +1232,8 @@ class ExpressionMapping {
           double.parse(value.text.replaceAll(RegExp(r'\s+(\d+\.\d+)\s+'), ''));
       Unit unit = _unitMap(value.unit);
       return LengthOrPercent(number, unit);
+    } else if (value is css.PercentageTerm) {
+      return LengthOrPercent(double.parse(value.text), Unit.percent);
     }
 
     //Ignore un-parsable input

lib/src/style.dart

@@ -192,6 +192,12 @@ class Style {
   /// Default: Width.auto()
   Width? width;
 
+  /// CSS attribute "`max-width`"
+  ///
+  /// Inherited: no,
+  /// Default: null
+  Width? maxWidth;
+
   /// CSS attribute "`word-spacing`"
   ///
   /// Inherited: yes,
@@ -261,6 +267,7 @@ class Style {
     this.verticalAlign = VerticalAlign.baseline,
     this.whiteSpace,
     this.width,
+    this.maxWidth,
     this.wordSpacing,
     this.before,
     this.after,
@@ -353,6 +360,7 @@ class Style {
       verticalAlign: other.verticalAlign,
       whiteSpace: other.whiteSpace,
       width: other.width,
+      maxWidth: other.maxWidth,
       wordSpacing: other.wordSpacing,
       before: other.before,
       after: other.after,
@@ -438,6 +446,7 @@ class Style {
     VerticalAlign? verticalAlign,
     WhiteSpace? whiteSpace,
     Width? width,
+    Width? maxWidth,
     double? wordSpacing,
     String? before,
     String? after,
@@ -481,6 +490,7 @@ class Style {
       verticalAlign: verticalAlign ?? this.verticalAlign,
       whiteSpace: whiteSpace ?? this.whiteSpace,
       width: width ?? this.width,
+      maxWidth: maxWidth ?? this.maxWidth,
       wordSpacing: wordSpacing ?? this.wordSpacing,
       before: beforeAfterNull == true ? null : before ?? this.before,
       after: beforeAfterNull == true ? null : after ?? this.after,