From 585516db95c6528c396ef33c59f99c4f8bb8b42e Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 27 Nov 2016 16:31:31 -0800
Subject: [PATCH] Add max-width 100% and max-height 100% utilities (#21221)

---
 docs/utilities/sizing-and-positioning.md | 14 +++++++++++++-
 scss/utilities/_spacing.scss             |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md
index 8881b177bc..670b6f188b 100644
--- a/docs/utilities/sizing-and-positioning.md
+++ b/docs/utilities/sizing-and-positioning.md
@@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v
 Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes.
 
 {% example html %}
-<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
+<img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%">
 {% endexample %}
 
 {% example html %}
@@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
   <div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div>
 </div>
 {% endexample %}
+
+You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
+
+{% example html %}
+<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
+{% endexample %}
+
+{% example html %}
+<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
+  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
+</div>
+{% endexample %}
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index e7248badb6..ff96c58d1f 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -3,6 +3,9 @@
 .w-100 { width: 100% !important; }
 .h-100 { height: 100% !important; }
 
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
+
 // Margin and Padding
 
 .mx-auto {