search

devlint / gridlex

Just a CSS Flexbox Grid System
http://gridlex.devlint.fr
MIT License
1.38k stars 144 forks source link

equalHeight not working in Safari Mac #34

Closed maxleistner closed 7 years ago

maxleistner commented 8 years ago

If i use the class .grid-equalHeight it is working fine in Chrome, but not in Safari for Mac. Any ideas how to work this out? Any fixes planing?

Screenshot

programmiri commented 7 years ago

This specific problem's presumably caused by a nested div:

<div class="grid-equalHeight">
  <div class="col">
    <div class="some-element">
      <div class="some-content">
      </div>
    </div>
  </div>
 <div class="col">
    <div class="some-element">
      <div class="some-content">
      </div>
    </div>
  </div>
</div>

giving the "some-element" class the properties display: flex and flex-direction: column and the "some-conten" class the property flex:1 fixed the problem in this specific setting.

Helpful sources I read about the topic: https://stackoverflow.com/questions/33481669/equal-height-nested-divs-in-bootstrap https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

devlint commented 7 years ago

Thanx @programmiri for your reply :)