Adding height-fit utility class

primer · Mar 5, 2018 · fb0fcf1 · fb0fcf1
1 parent db75cb6
commit fb0fcf1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md
@@ -156,6 +156,16 @@ Use `.width-full` to set width to 100%.
 </div>
 ```
 
+Use `.height-fit` to set max-height 100%.
+
+```html
+<div class="one-fourth column" style="height: 100px; overflow: auto;">
+  <div class="p-3 height-fit border">
+    Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
+  </div>
+</div>
+```
+
 Use `.height-full` to set height to 100%.
 
 ```html

diff --git a/modules/primer-utilities/lib/layout.scss b/modules/primer-utilities/lib/layout.scss
@@ -76,6 +76,8 @@
 .width-fit   { max-width: 100% !important; }
 /* Set the width to 100% */
 .width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
 /* Set the height to 100% */
 .height-full { height: 100% !important; }