From 8e5c485898197f283bf10950ef26ebc5b6723953 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@me.com>
Date: Sat, 5 Dec 2015 19:29:24 +0100
Subject: [PATCH] feat(layout): add flex noshrink attribute to prevent
 shrinking

Fixes #6067
---
 docs/app/partials/layout-children.tmpl.html | 4 ++++
 src/core/services/layout/layout.js          | 2 +-
 src/core/services/layout/layout.scss        | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

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 @@ <h3>Additional Flex Values</h3>
       <td>flex="grow"</td>
       <td>Will grow and shrink as needed. Starts with a size of 100%. Same as <code>flex="100"</code>.</td>
     </tr>
+    <tr>
+      <td>flex="noshrink"</td>
+      <td>Will grow as needed, but won't shrink. Starts with a size based on it's <code>width</code> and <code>height</code> values.</td>
+    </tr>
   </table>
 
 
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 {