Fix issue #43: children of equalHeight are flex elements and lose the…

…ir natural width [2.2.5]
devlint · Mar 6, 2017 · fde3d54 · fde3d54
1 parent 53046ad
commit fde3d54
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,8 @@
 ## Just a Flexbox Grid System
 
 [![Join the chat at https://gitter.im/devlint/gridlex](https://badges.gitter.im/devlint/gridlex.svg)](https://gitter.im/devlint/gridlex?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-v. 2.2.4
+v. 2.2.5
+
 
 Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
 
@@ -23,12 +24,12 @@ To use Gridlex out of the box, call the gridlex.min.css file in your project :
 
 Via cdnjs:
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.4/gridlex.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.5/gridlex.min.css">
 ```
 
 Via jsdelivr:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.4/gridlex.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.5/gridlex.min.css">
 ```
 **I want to include it in my source files!**
 
@@ -38,6 +39,13 @@ But there is the same version in Sass in the `src` folder.
 
 Include gridlex/src/gridlex.less or gridlex/src/gridlex.scss
 
+### Install via Npm
+npm install gridlex --save
+
+### Install via Bower
+bower install gridlex --save
+
+
 ### 3 ways to use Gridlex
 **1- The basic. Just add a class `.grid-*` (from -1 to -12)**
 ```html
@@ -97,12 +105,4 @@ Columns can be hidden at breakpoints using `_*-0` (e.g. `col-4_md-6_sm-0`)
 </tbody>
 </table>
 
-## Install
-### npm
-npm install gridlex --save
-
-### bower
-bower install gridlex --save
-
-
 See more : http://gridlex.devlint.fr
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "gridlex",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Just a Flexbox Grid System",
   "repository": {
     "type": "git",

diff --git a/docs/cards.html b/docs/cards.html
@@ -135,7 +135,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(2.2.4)</p>
+        <p>Just a Flexbox Grid System <br>(2.2.5)</p>
     </a></div>
 </header>
 <div class="demoPage grid">

diff --git a/docs/contribs.html b/docs/contribs.html
@@ -53,7 +53,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(v2.2.4)</p>
+        <p>Just a Flexbox Grid System <br>(v2.2.5)</p>
     </a></div>
 </header>
 <div class="demoPage">

diff --git a/docs/expo.html b/docs/expo.html
@@ -115,7 +115,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(2.2.4)</p>
+        <p>Just a Flexbox Grid System <br>(2.2.5)</p>
     </a></div>
 </header>
 

diff --git a/docs/gridlex.css b/docs/gridlex.css
@@ -71,9 +71,10 @@
 }
 [class*="grid-"][class*="-equalHeight"] > [class*="col"] {
   display: flex;
+  flex-wrap: wrap;
 }
 [class*="grid-"][class*="-equalHeight"] > [class*="col"] > * {
-  flex: 1;
+  flex: 1 0 100%;
 }
 [class*="grid-"][class*="-noBottom"] > [class*="col"] {
   padding-bottom: 0;

diff --git a/docs/gridlex.min.css b/docs/gridlex.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -70,7 +70,7 @@
 <header class="header">
     <div><a href="index.html">
         <h1>Gridlex</h1>
-        <p>Just a Flexbox Grid System <br>(v2.2.4)</p>
+        <p>Just a Flexbox Grid System <br>(v2.2.5)</p>
     </a></div>
 </header>
 <div class="demoPage">
@@ -90,9 +90,9 @@ <h3>How it works?</h3>
                 <p>The concept is simple: <br> you need to wrap your <code>.col</code> in a <code>.grid</code>. </p>
                 <p>That's all.</p><br>
                 <p><strong>Gridlex</strong> is ready to use "out of the box" in CSS, with all the vendor prefixes needed:</p>
-                <pre><code>&lt;link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/gridlex/2.2.4/gridlex.min.css">https://cdn.jsdelivr.net/gridlex/2.2.4/gridlex.min.css</a>">
+                <pre><code>&lt;link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/gridlex/2.2.5/gridlex.min.css">https://cdn.jsdelivr.net/gridlex/2.2.5/gridlex.min.css</a>">
 OR
-&lt;link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.4/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.4/gridlex.min.css</a>"></code></pre>
+&lt;link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.5/gridlex.min.css">https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.5/gridlex.min.css</a>"></code></pre>
                 <p>Or you can use Less or Sass files included!</p>
             </div>
             <div class="col-12">

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Just a Flexbox Grid System",
   "url": "https://github.com/devlint/gridlex",
   "author": "https://github.com/devlint",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "repository": {
     "type": "git",
     "url": "git@github.com:devlint/gridlex.git"

diff --git a/src/gridlex.less b/src/gridlex.less
@@ -89,8 +89,9 @@
 // Equal heights columns
   &[class*="-equalHeight"] > [class*="@{gl-colName}"]{
     display: flex;
+    flex-wrap: wrap;
     > *{
-      flex: 1;
+      flex: 1 0 100%;
     }
   }
 // Removes the padding-bottom

diff --git a/src/gridlex.scss b/src/gridlex.scss
@@ -88,8 +88,9 @@
 // Equal heights columns
   &[class*="-equalHeight"] > [class*="#{$gl-colName}"]{
     display: flex;
+    flex-wrap: wrap;
     > *{
-      flex: 1;
+      flex: 1 0 100%;
     }
   }
 // Removes the padding-bottom