-equalHeight does not work properly

[thomasoldenburger]

Adding extra items in the <div class="col"> within a grid-equalHeight does not seem to work. The content will become 100VH somehow.

This is working:

    <section>
      <div class="grid-equalHeight">
        <div class="col">Adipiscing Sem Ultricies Nibh Sit</div>
        <div class="col">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
        <div class="col">Adipiscing Sem Ultricies Nibh Sit</div>
        <div class="col">Adipiscing Sem Ultricies Nibh Sit</div>
      </div>
    </section>

This is NOT working:

    <section>
      <div class="grid-equalHeight">
        <div class="col">
          <div class="content">Adipiscing</div>
        </div>

        <div class="col">
          <div class="content">Adipiscing</div>
        </div>

        <div class="col">
          <div class="content">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
        </div>

        <div class="col">
          <div class="content">Adipiscing</div>
        </div>
      </div>
    </section>

[devlint]

Hello @thomasoldenburger
Can you make a codepen/jsfiddle-like example?
Thanx

[thomasoldenburger]

Hello @devlint

Very interesting. I did make a codepen and everything seems to work well in the codepen. When I want use it in my projects is doesn't seem to work. I tried the most basic setup and it is still not working. Am I doing something wrong here?

Basic project
index.html.zip

Codepen
https://codepen.io/anon/pen/bxzgGM

[ctrlmaniac]

I can provide screenshots:

<div class="welcome-cards grid-4-center-equalHeight">
  <div class="col">
    <div class="grid-1">
      <div class="col-top">
        <h6>Riparazioni</h6>
      </div>
      <div class="col-middle">
        <img src="{% webpack_static 'images/icons/calzolaio.svg' %}" alt="riparazioni">
      </div>
      <div class="col-bottom">
        <button type="button" name="button">scopri</button>
      </div>
    </div>
  </div>

  <div class="col">
    <h6>Duplicazione Chiavi</h6>
    <figure>
      <img src="{% webpack_static 'images/icons/chiave.svg' %}" alt="riparazioni">
    </figure>
    <button type="button" name="button">scopri</button>
  </div>

  <div class="col">
    <h6>Duplicazione Chiavi Auto</h6>
    <figure>
      <img src="{% webpack_static 'images/icons/chiave-auto.svg' %}" alt="riparazioni">
    </figure>
    <button type="button" name="button">scopri</button>
  </div>

  <div class="col">
    <h6>Duplicazione Radiocomandi</h6>
    <figure>
      <img src="{% webpack_static 'images/icons/radiocomando.svg' %}" alt="riparazioni">
    </figure>
    <button type="button" name="button">scopri</button>
  </div>

  [...]
</div>

In the first col there is a new grid and equalHeight doesn't touch that grid.

Children of the other cols inherit the parent height. By inspecting h6 this is the rule that cause the problem:

[class*="grid-"][class*="-equalHeight"] > [class~="col"] > *, [class*="grid-"][class*="-equalHeight"] > [class*="col-"] > *, [class*="grid-"][class*="-equalHeight"] > [class*="col_"] > * {
    height: 100%;
}

I had to override this rule setting all col's children elements to height: initial !important!