diff --git a/docs/app/partials/layout-children.tmpl.html b/docs/app/partials/layout-children.tmpl.html
index 15400b0c843..0385beafd01 100644
--- a/docs/app/partials/layout-children.tmpl.html
+++ b/docs/app/partials/layout-children.tmpl.html
@@ -146,6 +146,10 @@
Additional Flex Values
flex="grow" |
Will grow and shrink as needed. Starts with a size of 100%. Same as flex="100" . |
+
+ flex="noshrink" |
+ Will grow as needed, but won't shrink. Starts with a size based on it's width and height values. |
+
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
index efa5525d21e..24fc8a34f10 100644
--- a/src/core/services/layout/layout.js
+++ b/src/core/services/layout/layout.js
@@ -6,7 +6,7 @@
var SUFFIXES = /(-gt)?-(sm|md|lg)/g;
var WHITESPACE = /\s+/g;
- var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none'];
+ var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink'];
var LAYOUT_OPTIONS = ['row', 'column'];
var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];
diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
index cea340ae8e2..3f0dc3dcf38 100644
--- a/src/core/services/layout/layout.scss
+++ b/src/core/services/layout/layout.scss
@@ -130,6 +130,7 @@
.#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
.#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
.#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
+ .#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
// (1-20) * 5 = 0-100%
@for $i from 0 through 20 {