Fix elements overflowing the grid

Flex items have a min-width set to `auto` as per the spec:
https://www.w3.org/TR/css-flexbox/#min-size-auto

This causes elements like `pre` to extend past the `Grid-cell` even when
overflow is set.

Setting `min-width` to `0` fixes this and gives a more expected
behaviour in that situation.

Bug example: http://codepen.io/simonsmith/pen/BKGKBo
More detail: http://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow

lib/grid.css

@@ -103,11 +103,14 @@
  * utility or a component class that extends 'Grid'.
  *
  * 1. Set flex items to full width by default
+ * 2. Fix issue where elements with overflow extend past the
+ *    `Grid-cell` container.
  */
 
 .Grid-cell {
   box-sizing: inherit;
   flex: 0 0 100%; /* 1 */
+  min-width: 0; /* 2 */
 }
 
 /**

test/index.html

@@ -16,6 +16,12 @@
     min-height: 100px;
   }
 
+  pre {
+    overflow: auto;
+    white-space: pre;
+    word-wrap: normal;
+  }
+
   .Test {
     padding: 0 10px;
   }
@@ -53,6 +59,18 @@ <h3 class="Test-it">removes inter-cell whitespace</h3>
       </div>
     </div>
   </div>
+  <h3 class="Test-it">handles overflowing elements</h3>
+  <div class="Test-run">
+    <div class="Grid">
+      <div class="Grid-cell">
+        <div class="fixture-Box">
+           <pre>
+              This is some really long content that should be scrolled when the container is too small.
+           </pre>
+        </div>
+      </div>
+    </div>
+  </div>
   <h3 class="Test-it">automatically wraps cells across multiple lines when they don't fit a single row</h3>
   <div class="Test-run">
     <div class="Grid">