col-0 & equalHeight Issue about gridlex HOT 3 CLOSED

@TheKidCoder Seems like there's a few issues with .equalHeight.

Have you noticed yet that while .equalHeight causes the block element children of .col-* grow vertically, they end up shrinking horizontally as though they were inline blocks.

http://codepen.io/bootstrapped/pen/bwKoBA?editors=1100

Basically the only way for it to work is the children elements need to be wrapped in a div that has either width:100%; or flex-grow: 1; applied to it otherwise they will shrink horizontally and act as inline-blocks even if they're not.

Temp solutions:

<style>
.block {
  width: 100%;
}
</style>
  <div class="col-6_sm-12">
    <div class="block">

    </div>
  </div>

or

<style>
.block {
  flex-grow: 1;
}
</style>
  <div class="col-6_sm-12">
    <div class="block">

    </div>
  </div>

from gridlex.

Actually, .equalHeight seems pointless the more I look at it. Since width: 100%f needs to be added added to the child element of the columns, you could actually just add height: 100% to that element and drop .equalHeight all together.

So from what I can tell this actually does the same thing with needing .equalHeight:

<style>
.h100 {
  height: 100%;
}
</style>
<div class="grid">
  <div class="col-6_sm-12">
    <div class="block">
    ....
    </div>
  <div class="col-6_sm-12">
    <div class="h100">
    ....
    </div>
  </div>

I realized the horizontal shrinking issue could be fixed by adding flex-direcion: column to the .col classes, but that messes other things up, like when using .grid col with nested columns.

Anyway, maybe someone else has a better solutions, but for now the .equalHeight doesn't seem worth it to me.

from gridlex.

Hello both of you,
@TheKidCoder I've merged your code.
@bryanwillis I fix your issue by addind children of equalHeight>cols flex: 1 value.

from gridlex.